web-dev-qa-db-fra.com

Supprimer les dates passées et les dates des prochains mois du mois en cours

Est-il possible de supprimer les dates passées et les dates du mois prochain du calendrier complet? Donc, pour le mois en cours, il ne devrait afficher que les dates et les jours actuels.

jqueryfullcalendar
18
rubyist

Vous pouvez essayer de passer les événements dans la méthode eventRender ():

eventRender: function(event, element, view)
{
   if(event.start.getMonth() !== view.start.getMonth()) { return false; }
}
15
Bascht

Les cellules de la grille du mois suivant et du mois précédent ont la classe "fc-other-month", vous pouvez donc les cibler de cette façon:

exemple: pour masquer les numéros de jour, ajoutez le code CSS:

.fc-other-month .fc-day-number { display:none;}

ou lancez ce JavaScript:

$(".fc-other-month .fc-day-number").hide()
8
David Webster

Essaye ça!

$('.fc-other-month').html('');

Cela fonctionne pour moi!

6
Mohamed Alikhan

Aucune des solutions fournies dans cette réponse ne résout correctement le problème de la version actuelle de FullCalendar. En utilisant la réponse de Bascht comme point de départ, j'ai mis à jour son approche pour utiliser les API FullCalendar actuelles. Vous trouverez ci-dessous un exemple de code de travail permettant d'accomplir cette tâche:

eventRender: function (event, element) {
    var eventDate = event.start;
    var calendarDate = $('#activitiesCalendar').fullCalendar('getDate');
    if (eventDate.get('month') !== calendarDate.get('month')) {
        return false;
    }
}
4
ZettaGeek

Ajoutez ce paramètre showNonCurrentDates: false. Avec ce paramètre, les dates et les événements n'appartenant pas au mois en cours ne seront pas affichés.

$('#calendarLoansByRequestDate').fullCalendar({
     // Other settings
     showNonCurrentDates: false            
});
2
Kihats
$('.fc-other-month').html('');

et pour désactiver l'autre mois:

$(".fc-other-month").addClass('fc-state-disabled');
1
mudassar031
eventRender: function (event, element, view) {
    var currentMon = new Date(event.start);
    var currentMonth = currentMon.getMonth();

    var currentMonViewStart = new Date(view.start);
    var currentMonthViewStart = currentMon.getMonth();

    var currentMonViewEnd = new Date(view.end);
    var currentMonthViewEnd = currentMonViewEnd.getMonth();

    if((currentMonth == currentMonthViewStart) && (currentMonth  == currentMonthViewEnd)){ 
        return false; 
    }
}
1
Nishikant

Pour les versions plus récentes du plug-in FullCalendar, les opérations suivantes utilisent les fonctions d'assistance Moment.js:

eventRender: function(event, element, view){ var evStart = moment(view.intervalStart).subtract(1, 'days'); var evEnd = moment(view.intervalEnd).subtract(1, 'days'); if (!event.start.isAfter(evStart) || event.start.isAfter(evEnd)) { return false; } },

1
Ryan Barkley

Essayez d'utiliser weekMode: http://fullcalendar.io/docs/display/weekMode/ .

weekMode: 'liquid', or `weekMode: 'variable',`

J'espère que ça aide

1
Roberto Flores

pour la version 2.0 ou supérieure:

eventRender: function (event, element, view) {
   if(event.start._d.getMonth() !== $('calendar').fullCalendar('getDate')._d.getMonth()) { 
      return false; 
    }
}

// if you want to remove other month's days from view add to css:
    .fcc-other-month { 
        visibility:hidden;
     }
1
jettpleyn

Pour la dernière version, j'ai utilisé:

eventRender: function(event,element,view) {
    var view_title = view.title;
    var event_title = event.start;
    var event_title2 = moment(event_title).format('MMMM YYYY');
    if(event_title2 !== view_title) { 
        return false; 
    } else {
        var idname = 'event' + event.id;
        $(element).attr('id', idname).addClass('ttLT').attr('title', event.title);
        var mytitle = event.title;                              
        if (mytitle.toLowerCase().indexOf("open timeslot") >= 0)
        {
            $(element).addClass('alert').addClass('alert-success');
        }
        else{
            $(element).addClass('alert').addClass('alert-info');
            $(element).find('.fc-event-title').addClass('capitalize');
            $(element).find('.fc-event-inner').addClass('capitalize');                                                                                                                              
        }                                               
        element.qtip({
            content: event.description,
            style:{classes:'qtip-bootstrap'},
            position:{my:'bottom right',at:'top left'}
        });
    }
}
0
Jeff Shain

L'utilisation du rendu d'événement et d'une fonction de rappel a résolu mon problème. Cacher parfaitement les événements du mois précédent et suivant de la vue actuelle

eventRender: function(event, element, view) {
                        if (view.name == "month") {
                            if (event.start._i.split("-")[1] != getMonthFromString(view.title.split(" ")[0])) {
                                return false;
                            }
                        }
                    }

function getMonthFromString(mon) {
            var d = Date.parse(mon + "1, 2016");
            if (!isNaN(d))
                return new Date(d).getMonth() + 1;
            return -1;
        }

J'espère que ça aide

0
Varun Sreedharan

Cela fonctionne pour moi sur la version 3.6.1

 eventRender: function(event, element, view)
 {
     if(!event.start.isBetween(view.intervalStart, view.intervalEnd)) { return false; }
 }
0
Cioccolato

vous pouvez essayer ce clientOptions 'showNonCurrentDates' => false, and 'fixedWeekCount' => false,

Ce code me permet de cacher les jours des mois précédents et des mois suivants, mais les cellules de ces jours restent: Essayez d’utiliser Fullcalendar Doc

<?= $JSCode = <<<EOF
function(event, element, view) {

if(event.nonstandard.status =='0'){
 element.find(".fc-title").css({"color": "red"});   
 $('.fc-day-top[data-date="'+event.nonstandard.date+'"]').find('.fc-day-number').css({"background-color": "red", "color": "white"});                   
} else if(event.nonstandard.status == '1'){
   element.find(".fc-title").css({"color": "#1ab394"});                      
  $('.fc-day-top[data-date="'+event.nonstandard.date+'"]').find('.fc-day-number').css({"background-color": "#1ab394", "color": "white"});                     
}else if(event.nonstandard.status == '4' || event.nonstandard.status == '5'){
   $('.fc-day-top[data-date="'+event.nonstandard.date+'"]').find('.fc-day-number').css({"background-color": "#676a6c", "color": "white"});                                          
}else if(event.nonstandard.status == '3'){
 element.find(".fc-title").css({"color": "red"}); 
 $('.fc-day-top[data-date="'+event.nonstandard.date+'"]').find('.fc-day-number').css({"background-color": "red", "color": "white"});                        
}else if(event.nonstandard.status == '2'){
    element.find(".fc-title").css({"color": "orange"}); 
 $('.fc-day-top[data-date="'+event.nonstandard.date+'"]').find('.fc-day-number').css({"background-color": "orange", "color": "white"});                        
}                           

if(event.nonstandard.working_hours) { 
    var new_description =  '<strong>Total' + '    : </strong>' + event.nonstandard.working_hours + '<br/>';
    element.append(new_description);  
} } EOF;


        yii2fullcalendar\yii2fullcalendar::widget([
            'id' => 'calendar',
            'options' => [
                'lang' => 'en',
                'header' => [
                    'left' => 'prev,next today',
                    'center' => 'title',
                    'right' => 'month,agendaWeek,agendaDay'
                ],
            ],
            'clientOptions' => [
                'height' => 750,
                'showNonCurrentDates' => false,
                'language' => 'en',
                'eventLimit' => true,
                'selectable' => true,
                'selectHelper' => true,
                'droppable' => false,
                'editable' => false,
                'fixedWeekCount' => false,
                'defaultDate' => date('Y-m-d'),
                'eventRender' => new JsExpression($JSCode),
            ],
            'events' => Url::to(['/user/myattr/jsoncalendar'])
        ]);
        ?>

 full calendar custom view

0
Mahesh Kathiriya