FullCalendar - Récupérer la date en cliquant sur l'en-tête du jour dans la vue agendaWeek

Question

Je souhaite déterminer la date sélectionnée en cliquant sur la cellule de l'en-tête du jour dans la vue agendaWeek. Je peux ajouter un gestionnaire de clic à ces cellules d'en-tête, mais je ne sais pas trop comment obtenir la date à partir du fullcalendar, car l'événement dayClick ne se déclenche pas lorsque l'on clique sur l'en-tête. la classe sur ces cellules sont fc-sun, fc-mon, etc.

Answer 1

Puisque personne n'a encore répondu, il est ce que j'ai fait. L'agenda viewObject affiche les dates de début et de fin de la semaine en cours. J'ai créé un tableau contenant toutes les dates de la semaine affichée. J'ai ensuite utilisé JQuery pour sélectionner toutes les cellules d'en-tête et ajouté un attribut de date à chaque étiquette th. J'ai également ajouté un événement click à chaque balise th et récupéré l'attribut date lorsque l'en-tête est cliqué. Ce processus doit être exécuté à chaque nouvelle semaine.

Answer 2

Essayez cette solution de contournement je me suis fait. Il va rendre la navigation de agendaWeek à agendaDay facile en cliquant sur les en-têtes de jour, il suffit d'appeler zumaMaker() après fullcalendar init.

function zumaMaker() { 

var arrayUIDays = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun']; 
for (var m = 0; m < arrayUIDays.length; m++) { 
    var dim = ".fc-day-header.fc-widget-header.fc-" + arrayUIDays[m]; 
    var dok = $(dim).html(); 
    $(dim).attr("onclick", "zumaMethod('" + dok + "','" + dim + "');"); 
    $(dim).css("cursor", "pointer"); 
    } 
} 

function zumaMethod(doma, diver) { 

    var date = doma.split(" ")[1].split("/"); 
    var day = date[0]; 
    var month = date[1]; 
    var year = date[2]; 
    var off_date = year + "-" + month + "-" + day + "T" + "00:00:00"; 

    $("#pl_tbl").fullCalendar('changeView', 'agendaDay'); 
    $("#pl_tbl").fullCalendar('gotoDate', off_date); 
    $(diver).css("cursor", "pointer"); 
    $(diver).attr("onclick", "zumaMethodRevert();"); 
} 

function zumaMethodRevert() { 
    $("#pl_tbl").fullCalendar('changeView', 'agendaWeek'); 
    zumaMaker(); 
} 

Vous pouvez également ajouter ce CSS pour personnaliser les en-têtes de jour sur hover.

.fc-day-header:hover { 
    background-color: orange; 
} 
.fc-day-header { 
    background-color: white; 
}