CODEWITHSUNDEEP
javascriptjqueryfullcalendar
natush
natush

Reputation: 1

fullCalendar eventClick not fired

I'm using fullcalendar in an app. I want to change cell background color by clicking on cell, but eventClick not fired. Can anyone help me please. here the code:

 $(function () {
            var date = new Date();
            var d = date.getDate();
            var m = date.getMonth();
            var y = date.getFullYear();


            $('#calendar').fullCalendar({
            
                eventClick: function (event) {
                    
                    alert('hello');
                    event.backgroundColor = 'yellow';
                    $(this).css('background-color', 'red');

                },
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'agendaWeek'
                },
                editable: true,
                defaultView: 'agendaWeek',
                slotMinutes:60
            });
        });

Upvotes: 0

Views: 3254

Answers (2)

BlueMystic
BlueMystic

Reputation: 2297

You need to call the UpdateEvent:

    $('#calendar').fullCalendar({
       eventClick: function(event, element) {    
           event.title = "CLICKED!";    
           $('#calendar').fullCalendar('updateEvent', event);    
       }
   });

SOURCE: http://fullcalendar.io/docs/event_data/updateEvent/

Upvotes: 0

SarangK
SarangK

Reputation: 690

You can use dayClick event.

$(function () {
            var date = new Date();
            var d = date.getDate();
            var m = date.getMonth();
            var y = date.getFullYear();


            $('#calendar').fullCalendar({

                dayClick: function (date, jsEvent) { //Added this, use jsEvent for more customization
                     $(jsEvent.target).css('background-color', 'red');
                },
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'agendaWeek'
                },
                editable: true,  // Ensure you have this true
                disableResizing:true,   // Ensure you have this true
                defaultView: 'agendaWeek',
                slotMinutes:60
            });
        });

at day click you can customize your css.

Upvotes: 1

Related Questions