comment faire de la journée de la valeur de cliquer dessus dans la vue mois

Est-il un moyen de faire de la journée de la valeur du mois de cliquer dessus dans la vue mois, comme dans Google Agenda?

Je voudrais que, lorsqu'un utilisateur clique sur un jour dans le mois(juste le nombre de jours, pas tout le bloc), la fullCalendar doit passer à l'affichage du jour de ce jour particulier.

Merci!

InformationsquelleAutor SkyeBoniwell | 2011-12-07
  1. 32

    Utiliser le dayClick événement, le changeView méthode, et la goToDate méthode.

    Quelque chose comme cela (pas testé):

    $('#calendar').fullCalendar({
    dayClick: function(date, allDay, jsEvent, view) {

        if (allDay) {
            //Clicked on the entire day
            $('#calendar')
                .fullCalendar('changeView', 'agendaDay'/* or 'basicDay' */)
                .fullCalendar('gotoDate',
                    date.getFullYear(), date.getMonth(), date.getDate());
        }
    }
});

    Edit re: commentaires

    Vous pouvez vérifier l' événement.cible dans le rappel:

    $('#calendar').fullCalendar({
    dayClick: function(date, allDay, jsEvent, view) {

        if (allDay) {
            //Clicked on the entire day 

            if ($(jsEvent.target).is('div.fc-day-number')) {      
                //Clicked on the day number 

                $('#calendar') 
                    .fullCalendar('changeView', 'agendaDay'/* or 'basicDay' */) 
                    .fullCalendar('gotoDate', date.getFullYear(), date.getMonth(), date.getDate()); 
            }
        }
    }
});
    • ne pas ce passer de la vue si l'utilisateur clique n'importe où sur la journée de bloc, au lieu de simplement le numéro du jour?
    • Ce que Brandon a dit...merci pour le code, c'est qu'ils fonctionnent réellement. Mais je me demandais si il y avait un moyen de rendre le nombre de jours cliquable...comme Google calendar fonctionne. -Merci
    • vous avez raison, voir mon edit.
    • génial...a parfaitement fonctionné. Merci man! J'ai ajouté une directive css, 'curseur: pointeur' à 'div.fc-jour-nombre", de sorte que le pointeur de la souris change de la petite main lorsque vous placez le curseur sur le numéro du mois.
    • Je tiens également à mentionner que vous avez pour la chaîne de la méthodes. Si vous les appelez, séparément, elle ne fonctionne pas!!!
    • Bizarrement, dans la dernière version, il ne fonctionnera PAS si vous enchaînez les méthodes, vous avez pour briser les chaînes pour qu'il fonctionne. Aussi, vous pouvez tout simplement passer le date objet: $('#agenda").fullCalendar('changeView', 'basicDay'); $('#agenda").fullCalendar('gotoDate', date)
    • Juste pour information, le dayClick fonction a supprimé le allDay paramètre V2 fullcalendar.io/docs/souris/dayClick
    • Dans la version 2.7.2 dayClick: function(date, jsEvent, view) { if ($(jsEvent.target).is('td.fc-day-number')) { // Clicked on the day number in the month view $('#calendar').fullCalendar('changeView', 'agendaDay'); $('#calendar').fullCalendar('gotoDate', date); } }

    InformationsquelleAutor Matt Ball
  2. 4

    Matt Ballon de la réponse de l'excellent travail tant que vous n'avez pas de fullCalendar est selectable option est activée. Si vous le faites, cela ne fonctionne pas.

    Le problème est qu'une superposition de div est créé pour représenter la sélection, et que la superposition div devient le jsEvent.target. Il a également mess avec jQuery .is(':hover') test -- appel retournera seulement vrai pour le premier élément, et le premier élément est la superposition.

    Ma solution est d'ajouter mon propre superposition dans le fullCalendar superposition. Mon superposition est absolument en mesure d'être dans le coin supérieur droit sur le numéro du jour. Dans mon onDayClick gestionnaire d'événements, je peux tester pour voir si mon coin de superposition a :hover. Si elle le fait, je sais le nombre de jours a été cliqué.

    Voici mon code Javascript:

    //Called after the calendar layout has been rendered, 
//but before events are added.
function onCalendarViewRender(view, element) {
    //The .fc-cell-overlay div isn't created until a selection event happens. 
    //Force a selection event to trigger the creation of this div.
    $('#calendar').fullCalendar('select', 
        pageData.calendarMonth, 
        pageData.calendarMonth, 
        true);

    //Create our corner overlay so we can detect whether the 
    //mouse was over the day when the click event occurred.
    var corner = $('<div>').addClass('my-cell-overlay-day-corner');
    $('.fc-cell-overlay').append(corner);
}


function onCalendarDayClick(date, allDay, jsEvent, view) {
    //Check to see whether the mouse was hovering over our day corner overlay 
    //that is itself applied to the fullCalendar's selection overlay div.
    //If it is, then we know we clicked on the day number and not some other 
    //part of the cell.
    if ($('.my-cell-overlay-day-corner').is(':hover')) {
        alert('Click!');
    }
}


$('#calendar')
    .fullCalendar({
        selectable : true,
        viewRender : onCalendarViewRender,
        dayClick   : onCalendarDayClick,
        eventSources : [ ... your sources ... ]
    });

    Et le CSS pour la superposition, et assurez-vous que le calendrier du nombre de jours div ressemble à un lien et s'aligne avec notre superposition:

    #calendar .fc-day-number {
    text-decoration: underline;
    width: 15px;
    height: 16px;
    text-align: right;
}

#calendar .fc-day-number:hover {
    cursor: pointer;
}


#calendar .my-cell-overlay-day-corner {
    position: absolute;
    top: 0;
    right: 0;
    width: 19px;
    height: 16px;
    cursor: pointer;
}
    • merci à vous épargnant de vie!!
    InformationsquelleAutor Charlie Kilian
  3. 1

    Fullcalendar 3.0 et jusqu'à maintenant comprennent ce par défaut par le biais de navLinks.
    Utilisez simplement navLinks: true.

    InformationsquelleAutor SaeX