web-dev-qa-db-fra.com

Comment bloquer des dates dans le calendrier complet au-delà d'une certaine date

J'ai une date future qui a toujours 30 jours d'avance sur la date actuelle. Il est stocké dans un objet Date. J'ai travaillé cela en utilisant:

var currentDate = new Date();
var futureBlockDate = new Date();
futureBlockDate.setDate(currentDate.getDate() + 30);

Utilisation du plugin FullCalendar jQuery Je souhaite bloquer visuellement tous les jours au-delà de cette date dans le calendrier avec une couleur d'arrière-plan différente afin qu'un utilisateur sache qu'il ne peut pas cliquer dessus ni créer d'événement ces jours-là.

Quelle est la meilleure façon de faire cela avec le FullCalendar? Peut-être désactiver toutes les dates par défaut et n'activer que pour une plage spécifique (à partir de la date d'aujourd'hui jusqu'à 30 jours dans le futur)?

Je pense que je peux appliquer un état d'arrière-plan désactivé à toutes les cellules à l'aide du code suivant:

$(".fc-widget-content").addClass("disabled");

.disabled .fc-day-content {
    background-color: #123959;
    color: #FFFFFF;
    cursor: default;
}

Comment ceci peut être fait?

javascriptjquerydatefullcalendar
9
user unknown

Utilisez l’option dayRender pour ajouter une classe "désactivée" aux dates hors limites.

$('#calendar').fullCalendar({
    ...
    dayRender: function(date, cell){
        if (date > maxDate){
            $(cell).addClass('disabled');
        }
    }
    ...
});

Vous pouvez également utiliser les méthodes viewRender event et gotoDate , pour empêcher les utilisateurs de naviguer plus de 30 jours après aujourd'hui:

$('#calendar').fullCalendar({
    ...
    viewRender: function(view){
        if (view.start > maxDate){
            $('#calendar').fullCalendar('gotoDate', maxDate);
        }
    }
    ...
});
20
LeGEC

Que diriez-vous de cette solution?

dayClick: function(date, allDay, jsEvent, view) {
   var myDate = new Date();

   //How many days to add from today?
   var daysToAdd = 15;

   myDate.setDate(myDate.getDate() + daysToAdd);

   if (date < myDate) {
       //TRUE Clicked date smaller than today + daysToadd
       alert("You cannot book on this day!");
   } else {
       //FLASE Clicked date larger than today + daysToadd
       alert("Excellent choice! We can book today..");
   }

}
6
dezman

celui-ci a choisi la période du mois en cours

<?php $numerodias = cal_days_in_month(CAL_GREGORIAN, date('m'), date('Y')); ?>
$('#calendar').fullCalendar({
            header: {
                left: 'prev,next',
                center: 'title',
                right: 'today'
            },
            defaultDate: moment(),
            editable: false,
            //height:'auto',
            //weekends: false,
            defaultView: 'agendaWeek', 
            eventLimit: true, 

            events: {
                url: 'php/get-events.php',
                error: function() {
                    $('#script-warning').show();
                }

            },
            loading: function(bool) {
                $('#loading').toggle(bool);

            },
        viewRender: function(view,element) {
            var now = new Date();
            var end = new Date();
            end.setMonth(now.getMonth()); 
            end.setDate(<?php echo $numerodias; ?>);
            now.setDate(1);
            if ( end < view.end) {
                $("#calendar .fc-next-button").hide();
                return false;
                alert(end);
            }
            else {
                $("#calendar .fc-next-button").show();
            }

            if ( view.start < now) {
                $("#calendar .fc-prev-button").hide();
                return false;
            }
            else {
                $("#calendar .fc-prev-button").show();
            }
        }
        });
    });
1
Gio Valle

Pour quelqu'un qui cherche une solution pour définir un min-display-date et un max-display-date: (pour fullcalendar v2)

$('#calendar').fullCalendar({
    defaultDate: new Date(),
    viewRender: function(view, element) {

        curdate = new Date();
        viewdate = new Date(view.start);

        // PREV - force minimum display month to current month
        if (new Date(viewdate.getFullYear(), viewdate.getMonth() + 1, 1).getTime() <= 
            new Date(curdate.getFullYear(), curdate.getMonth(), 1).getTime()){
            $('.fc-prev-button').prop('disabled', true);
            $('.fc-prev-button').css('opacity', 0.5);
        } else {
            $('.fc-prev-button').prop('disabled', false);
            $('.fc-prev-button').css('opacity', 1);
        }

        // NEXT - force max display month to a year from current month
        if (new Date(viewdate.getFullYear(), viewdate.getMonth() + 1).getTime() >= 
            new Date(curdate.getFullYear() + 1, curdate.getMonth() + 1).getTime()){
            $('.fc-next-button').prop('disabled', true);
            $('.fc-next-button').css('opacity', 0.5);
        } else {
            $('.fc-next-button').prop('disabled', false);
            $('.fc-next-button').css('opacity', 1);
        }
    }
});
1
CIRCLE

pour désactiver la cellule au clic (version 2.0):

dayRender: function( date, cell ) {
     // It's an example, do your own test here
    if(cell.hasClass("fc-other-month")) {
          cell.addClass('disabled');
     } 

},
dayClick: function(date, jsEvent, view) {
    if($(jsEvent.target).hasClass("disabled")){
        return false;
    }
    // Your code
    // ....
}
0
altore

Ajoutez simplement ce code dans le calendrier complet:

select: function (start, end, jsEvent, view) {
            if (start.isBefore(moment())) {
                $('#calendar').fullCalendar('unselect');
                return false;
            }
            else {

                 var currentDate = moment(start).format('YYYY/MM/DD'));
                 alert(currentDate);
            } 
        }

Simple et rapide Prendre plaisir!

0
Wajid khan