0

Im currently using eventRender to change the background color of an event's cell (month view), but I'm hoping to take it further and change the cell to another color if theres 2 or more events on that date.

Something like:

eventRender: function(event, element, view)

 if >2 events 
    {element.css("background-color", "orange"); }
 else
    { element.css("background-color", "red");}
kingkelly
  • 199
  • 1
  • 1
  • 8
  • 1
    in that case you need to count the number of events which occur on that date. https://fullcalendar.io/docs/clientEvents can help you with that. What have you researched or tried so far? – ADyson Aug 02 '18 at 08:17
  • Ive been just using a var eventCounter = 0; and upping the counter when theres an event on the date. If the counter gets over 1 then i change some css, but eventRender isnt working in there. – kingkelly Aug 02 '18 at 15:27
  • show precisely what you did, please. And give us some sample event data, so we can reproduce the issue. Thanks. – ADyson Aug 02 '18 at 15:34
  • @kingkelly Did you find any solution? if same date have more than two events how to change the cell color? – Khizar Nayyar Sep 09 '19 at 15:56
  • @KhizarNayyar Nope never figured it out :( – kingkelly Sep 10 '19 at 19:24
  • @kingkelly kindly see the answer in this post https://stackoverflow.com/questions/57857811/how-to-change-the-color-of-enitre-cell-if-the-same-date-has-more-than-3-events-u – Khizar Nayyar Sep 12 '19 at 13:01

1 Answers1

1

Try this one to change the back ground colour as per the different event

eventRender: function(event, element, view) {
            if (event.title == 'Birthday) {
                element.css('background-color', 'red');
            }
            else if (event.title == 'Interview) {
                element.css('background-color', 'green');
            }
            else if (event.title == 'Anniversary') {
                element.css('background-color', 'Yellow');

            }
        },

or otherwise you can do this with in event object by add the colour.

events:[{
                title: 'Birthday',
                start: new Date(y, m, d + 1, 19, 0),
                end: new Date(y, m, d + 1, 22, 30),
               // backgroundColor: App.getBrandColor('purple'),
                 color:'#4fc6d2'
                allDay: false
            }]
hazan kazim
  • 938
  • 9
  • 11
  • interesting! Im curious about how an event gets it's ID attached to it. Does each day start with the first event having id=1? The code doesnt work for me so I'm guessing my events (synched from a google calendar) dont have those IDs – kingkelly Aug 07 '18 at 01:28
  • not mean that each event you have title like you can add what ever in to event object.and get in to the event render function then you can write your code. – hazan kazim Aug 07 '18 at 05:18