CODEWITHSUNDEEP
django-modelscolorsfullcalendar
Patrice
Patrice

Reputation: 209

django : fullcalendar choose a color for each event

I try to choose a color for each event by ticking a checkbox in the django admin interface

With django, I have my file :

model.py

class Event(models.Model):
.....
red = models.BooleanField(verbose_name='red', default=False, blank=True)
blue = models.BooleanField(verbose_name='blue', default=False, blank=True)
green = models.BooleanField(verbose_name='green', default=False, blank=True)
yellow = models.BooleanField(verbose_name='yellow', default=False, blank=True)
orange = models.BooleanField(verbose_name='orange', default=False, blank=True)

my view.py :

events = Event.objects.all()
for event in events:
event_list.append({
            .....

            'red':  event.red,
            'blue': event.blue,
            'green': event.green,
            'yellow': event.yellow,
             ...

return http.HttpResponse(json.dumps(event_list),
                             content_type='application/json')

my admin.py

fieldsets = (
      ......


      (u"couleur de l' évenement", {
            'fields': ( ('red', 'blue', 'green', 'yellow',))
        }),

my javascript file :

eventAfterRender: function(event, element, view) {

var red=event.red;
var blue=event.blue;
var green=event.green;
var yellow=event.yellow;




 if(red=true){

        element.children('.fc-event-inner').css({'background-color':'#ff0000'});
        element.children('.fc-event-inner').css({'color':'black'});

      }

 if(blue=true) {

      element.children('.fc-event-inner').css({'background-color':'#013adf'});
      element.children('.fc-event-inner').css({'color':'black'});

      }

 if(green=true){

      element.children('.fc-event-inner').css({'background-color':'#00ff40'});
      element.children('.fc-event-inner').css({'color':'black'});

                                               }
 if(yellow=true){

       element.children('.fc-event-inner').css({'background-color':'#f7fe2e'});
       element.children('.fc-event-inner').css({'color':'black'});

                                               }

The problem is that I display all events with the same color : yellow... what is this error ?

Upvotes: 0

Views: 317

Answers (1)

smcd
smcd

Reputation: 3265

Update if statements to use == instead of = (if it is explicitly true you can use ===)

eventAfterRender: function(event, element, view) {

  var red = event.red;
  var blue = event.blue;
  var green = event.green;
  var yellow = event.yellow;

  if (red == true) {

    element.children('.fc-event-inner').css({
      'background-color': '#ff0000'
    });
    element.children('.fc-event-inner').css({
      'color': 'black'
    });

  }

  if (blue == true) {

    element.children('.fc-event-inner').css({
      'background-color': '#013adf'
    });
    element.children('.fc-event-inner').css({
      'color': 'black'
    });

  }

  if (green == true) {

    element.children('.fc-event-inner').css({
      'background-color': '#00ff40'
    });
    element.children('.fc-event-inner').css({
      'color': 'black'
    });

  }
  if (yellow == true) {

    element.children('.fc-event-inner').css({
      'background-color': '#f7fe2e'
    });
    element.children('.fc-event-inner').css({
      'color': 'black'
    });

  }
}

As an alternative, you can set the color directly in the Event object like

events: [{
    start: '2015-12-12',
    end:   '2015-12-15',
    title: 'This should have a blue background',
    /*
       'color' sets background AND border.
       You can also use 'textColor', 'backgroundColor', and 'borderColor'
    */
    color: 'blue'
}]

Upvotes: 1

Related Questions