Discussion :

[Kivabien]

Bonjour,

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

J'ai effectué le code suivant :

Code Javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :



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:



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 ?

Merci !

[Kivabien]

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

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

[Toufik83]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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