Changing background-color of event in jquery full calendar

Question

I have a web application ( asp.net mvc4 ) in which i used the Jquery Full Calendar site .

  <script>

        $(document).ready(function () {
            var date = new Date();
            var d = date.getDate();
            var m = date.getMonth();
            var y = date.getFullYear();
            var tab = [];
            var d1 = [];
            var m1 = [];
            var y1 = [];
            var d2 = [];
            var m2 = [];
            var y2 = [];
            var colors = [];
            
             @for(int i =0; i< @Model.Get_List_Tache().Count;i++){
                 @: d1.push(@Model.Get_List_Tache()[i].Begin_date.Day);
                 @: m1.push(@Model.Get_List_Tache()[i].Begin_date.Month);
                 @: y1.push(@Model.Get_List_Tache()[i].Begin_date.Year);
                 @: d2.push(@Model.Get_List_Tache()[i].End_date.Day);
                 @: m2.push(@Model.Get_List_Tache()[i].End_date.Month);
                 @: y2.push(@Model.Get_List_Tache()[i].End_date.Year);
                         }
            d1.reverse();
            m1.reverse();
            y1.reverse();
            d2.reverse();
            m2.reverse();
            y2.reverse();
            @for(int i =0; i< @Model.Get_List_Tache().Count;i++){
            @:var e = { title: "Tache: @Model.Get_List_Tache()[i].Tache_description", start: new Date(y1.pop(), m1.pop() - 1, d1.pop(), 08, 00), end: new Date(y2.pop(), m2.pop() - 1, d2.pop(), 18, 00), allDay: true};
            @: tab.push(e);
        }                      
      $('#calendar').fullCalendar({
                theme: true,
                header: {left: 'prev,next today',center: 'title',right: 'month,agendaWeek,agendaDay'},
                editable: true,
                events: tab
      });
        });
         @for (int i = 0; i < @Model.GetColors().Count; i++)
         {
           
         }

</script>

I have a list of colors in the model GetColors()

public List<string> GetColors() {
            Sa_group sadmin = new Sa_group();
            Equipe _equipe = new Equipe();
            List<string> _out = new List<string>();
            List<Tache> liste_initiale = _equipe.Get_List_tache();
            foreach (Tache t in liste_initiale) {
                if (t.Id_tache_status == 1) { _out.Add("red"); }
                if (t.Id_tache_status == 2) { _out.Add("green"); }
                if (t.Id_tache_status == 3) { _out.Add("black"); }
                                                }
            return _out;
        }

So, i need to change the background-color for each element in events by the values of GetColors().

How can i do this task? Any suggestions?

Answer 1

Hi Lamloumi has you can see in event object properties there is a className you can set in every event wich allows you define for each event a CSS class, and then define each color for each type of event background color in CSS. If the colors are dynamic i mean if they are not all the same you can use Jquery or javascript to change "on the fly" the css class.

If you need further explanation please let me know.

Live long and prosper.