FullCalendar, how to change event class on eventClick function

China☆狼群 提交于 2020-03-05 05:31:10

问题


My calendar initialize with events from ajax-php script. The events has a simple css class with green background-color for available events and red background-color for not available events.

I need that when I click on a green event, it will turn red to set this not available.

var calendarEl = document.getElementById('calendar');
$('#calendar').empty();
var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: ['timeGrid'],
    defaultView: 'timeGridWeek',
    minTime: '08:00:00',
    maxTime: '18:00:00',
    allDaySlot: false,
    weekends: false,
    defaultDate: jdata.defaultDate,
    contentHeight: 'auto',
    locale: 'es',
    eventClick: function (info) {
        var dia = moment(info.event.start).format("DD/MM/YYYY");
        var hora = moment(info.event.start).format("HH:mm");

        if (info.event.classNames[0] == 'completo') {
            return;
        }

        reservarSala(info.event, sala_id);
    },
    events: jdata.events
});
calendar.render();

回答1:


The documentation says the HTML element for the event can be accessed using el:

var check_color = info.el.style.background

if (check_color == "green") {
    info.el.style.background = "red"
} else {
    info.el.style.background = "green"
}


来源:https://stackoverflow.com/questions/55783823/fullcalendar-how-to-change-event-class-on-eventclick-function

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!