[FullCalendar] Paramétrage Composant

Version imprimable

2 pièce(s) jointe(s)

Bonjour,

J'utilise le composant FullCalendar : https://fullcalendar.io/

J'ai effectué le code suivant :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 $('#calendar').fullCalendar({ headerToolbar: { left: "prev,next today", center: "title", right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek" }, businessHours: { daysOfWeek: [ 1, 2, 3, 4, 5 ], startTime: '08:00', endTime: '20:00', }, initialView: 'timeGridWeek', slotMinTime: '08:00', slotMaxTime: '20:00', themeSystem: "Pulse", locale: "fr", editable: true, eventStartEditable: true, eventDurationEditable: true, selectable: true, eventDragMinDistance: 10, });
J'obtient le résultat :

https://i13.servimg.com/u/f13/09/03/44/86/captur32.png

J'ai 2 problèmes ….
Comme vous pouvez le voir sur ma capture en haut, le calendrier ne s'arrête pas à 20h. On voit encore du jaune et du blanc par la suite.
J'aimerais bien que le tableau se ferme à 20h afin d'avoir un résultat joli.
Comment faire ? J'ai indiqué dans mon code : slotMaxTime: '20:00'.
Mais ça ne marche pas.

Puis, j'aimerais bien mettre le thème Pulse qui est le suivant avec les boutons violets:

https://i13.servimg.com/u/f13/09/03/44/86/captur33.png

Mais, ça ne marche pas en mettant : themeSystem: "Pulse"
Il me met un thème noir et blanc ...
Pourtant sur le site cela m'indique bien un thème en violet.

Donc, si possible, pouvez-vous m'aider sur ces 2 petites choses s'il vous plait ? :D

Merci !

12/11/2020, 18h23
Kivabien

J'ai réglé mon premier problème en mettant : height: 'auto' :D

Par contre, je n'arrive toujours pas à mettre le thème Pulse :
-> https://fullcalendar.io/releases/ful...os/themes.html

Savez-vous comment on fait s'il vous plait ?

Merci :D

Bonjour,

D'après le lien que tu as posté, ils utilisent le fichier theme-chooser.js qui contient la fonction initThemeChooser(settings) permettant d'initialiser le fullCalendar avec le thème choisi.

L'option themeSystem accépte seulement 4 valeurs (bootstrap4,bootstrap3,jquiery-ui et standard), donc si tu veux appliquer le thème "pulse" de bootstrap4, essaie d'initialiser l'option themeSystem avec "bootstrap4" comme ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
$(document).ready(function() {
  initThemeChooser({
      init: function(themeSystem) {
         $('#calendar').fullCalendar({
            themeSystem: "bootstrap4",
            //les autres options....
          });
      },
      change: function(themeSystem) {
        $('#calendar').fullCalendar('option', 'themeSystem', themeSystem);
      }
  });
});

Et ajoutes deux <div> <div id="theme-system-selector" class="selector"></div> et <div data-theme-system="bootstrap4" class="selector"> (que tu peux les cacher avec style='display:none') avec un <select> dont l'option sélectionnée selected="selected" est le thème que tu veux activer :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
  <div id="theme-system-selector" class="selector">
    Theme System:
   <select>
      <option value="bootstrap4" selected="selected">Bootstrap 4</option><-- utiliser le thème bootstrap4-->
      <option value="bootstrap3">Bootstrap 3</option>
      <option value="jquery-ui">jQuery UI</option>
      <option value="standard">unthemed</option>
    </select>
  </div>
 
  <div data-theme-system="bootstrap4" class="selector" style="">
    Theme Name:
    <select>
      <option value="">Default</option>
      <option value="cerulean">Cerulean</option>
      <option value="cosmo">Cosmo</option>
      <option value="cyborg">Cyborg</option>
      <option value="darkly">Darkly</option>
      <option value="flatly">Flatly</option>
      <option value="journal">Journal</option>
      <option value="litera">Litera</option>
      <option value="lumen">Lumen</option>
      <option value="lux">Lux</option>
      <option value="materia">Materia</option>
      <option value="minty">Minty</option>
      <option value="pulse" selected="selected">Pulse</option><!-- ici on active le thème pulse de bootstrap4 -->
      <option value="sandstone">Sandstone</option>
      <option value="simplex">Simplex</option>
      <option value="sketchy">Sketchy</option>
      <option value="slate">Slate</option>
      <option value="solar">Solar</option>
      <option value="spacelab">Spacelab</option>
      <option value="superhero">Superhero</option>
      <option value="united">United</option>
      <option value="yeti">Yeti</option>
    </select>
  </div>

Remarque : tu peux supprimer les autres <option> et garder seulement celles dont tu as besoin ...