Alliance Calendar

Description

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...

Getting started

Installation

    npm i alliance-calendar

Une fois installé vous devez ajouter trois lien dans votre ./public/index.html comme ceci :

    //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 :

Props default

Les props par défault sont ceux ci :

• showSideBar : true
• showHeader : true
• logo :
• addEventLogo :
• localDayJS : fr

Description Props

• 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