Cette librairie a pour objectif de pouvoir créer un calendrier avec des événements personalisé puis personifié les popup sur le onClick
Cette librairie utilise tailwindCSS et vous permet d'afficher des partie ou non du calendrier comme la sideBar...
npm i alliance-calendar
//Celui-ci permet d'ajouter tailwindCSS avec le CDN
<script src="https://cdn.tailwindcss.com"></script>
//Ces deux liens utilise l'api google pour material icons
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet" />
Une fois les liens ajoutés dans le fichier public/index.html vous pouvez ajouter notre component comme ci-dessous.
import './App.css';
import AllianceCalendar from 'alliance-calendar'
function App() {
return (
<div className="App">
<AllianceCalendar />
</div>
);
}
export default App;
Vous devriez avoir ceci :
Les props par défault sont ceux ci :
- showSideBar => Permet d'afficher ou non le menu à gauche, l'affiche si égale à true
- showHeader => Permet d'afficher ou non le menu en haut, l'affiche si égale à true
- logo => Logo qui s'affiche dans le header en haut à gauche
- addEventLogo => Logo dans le button qui se trouve dans la sideBar pour ajouter un événement
- localDayJS => Permet de spécifié la langue utilisé dans la librairie dayjs