Discussion :

[amalliap]

Bonjour,

J'utilise actuellement fullcalendar pour pouvoir créer un planning pour différente équipe de personnes.
Je souhaiterais que selon l'équipe une personne apparaisse sur le planning avec une couleur différente.

Voici le code cshtml :

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
 
<div id='wrap' class="panel-body">
    <div id='external-events'>
        <div id='external-events-listing'>
            <h4>EQUIPEA</h4>
            <div class='fc-event' id="equipeA">XXX</div>
            <div class='fc-event' id="equipeA">XXX</div>
            <div class='fc-event' id="equipeA">XXX</div>
        </div>
        <div id='external-events-listing'>
            <h4>EQUIPEB</h4>
            <div class='fc-event' id="equipeb">XXX</div>
            <div class='fc-event' id="equipeb">XXX</div>
            <div class='fc-event' id="equipeb">XXX</div>
        </div>
   </div>
<div/>

Voici le code javascript permettant de stocker les events dans data :

Code :

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
 
$('#external-events .fc-event').each(function () {
 
        // store data so the calendar knows to render an event upon drop 
        $(this).data('event', {
            title: $.trim($(this).text()), // use the element's text as the event title
            stick: true// maintain when user navigates (see docs on the renderEvent method)
        });
 
        // make the event draggable using jQuery UI
        $(this).draggable({
            zIndex: 999,
            revert: true,      // will cause the event to go back to its
            revertDuration: 0  //  original position after the drag
        });
    });

Comment puis-je faire pour donner une couleur aux events en fonction de l'id de chaque membres ?

Merci d'avance.

Cordialement.

[Watilin]

Bon alors d'abord, attention : un id doit être unique dans la page. Tu ne devrais pas avoir plusieurs éléments id="equipeA" par exemple. Utilise une classe à la place.

Mettons que ton code HTML devient ceci :

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
<div id='wrap' class="panel-body">
    <div class='external-events'>
        <div class='external-events-listing'>
            <h4>EQUIPEA</h4>
            <div class="fc-event equipeA">XXX</div>
            <div class="fc-event equipeA">XXX</div>
            <div class="fc-event equipeA">XXX</div>
        </div>
        <div class='external-events-listing'>
            <h4>EQUIPEB</h4>
            <div class="fc-event equipeB">XXX</div>
            <div class="fc-event equipeB">XXX</div>
            <div class="fc-event equipeB">XXX</div>
        </div>
   </div>
<div/>

Ensuite, tu as une boucle .each dans ton script, tu peux en tirer parti :

Code :

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

1
2
3
4
5
6
$('.external-events .fc-event').each(function () {
  …
 
  if ($(this).hasClass('equipeA'))      $(this).css('color', 'red');
  else if ($(this).hasClass('equipeB')) $(this).css('color', 'blue');
});

Autrement tu peux utiliser un attribut data-, mais une classe suffit dans le cas présent.

[amalliap]

C'est exactement ce que je voulais merci, je savais qu'il fallait que je profite de ma fonction each() mais je ne connaissais pas la fonction hasClass().
Merci beaucoup !!