web-dev-qa-db-fra.com

Comment définir un calendrier complet à une date de début spécifique lorsqu'il est initialisé pour la première fois?

Je voudrais définir le mois initial à un mois arbitraire lorsque j'appelle la fonction pour afficher le calendrier.

Supposons, par exemple, que l'utilisateur sélectionne une date en juin dernier (juin 2011) ailleurs et que je veuille afficher l'intégralité du calendrier avec l'affichage du mois d'avril précédent (avril 2010). Et oui, c'est juste pour faire un cas, pas pour donner un sens ;-))

J'ai essayé d'appeler 'gotodate' avant d'appeler ensuite la fonction d'affichage, mais cela ne semble pas fonctionner.

$('#calendar').fullCalendar( 'gotoDate', currentdate);
$('#calendar').fullCalendar({
    header: {left: 'prevYear,prev,today,next,nextYear',
         center: 'title', right: 'month,basicWeek,basicDay' etc...}

Est-ce que quelqu'un pourrait éventuellement s'il vous plaît fournir un exemple comment faire cela correctement?

javascriptjqueryfullcalendar
48
Stefan

Vous l'avez à l'envers. Affichez d'abord le calendrier, puis appelez gotoDate.

$('#calendar').fullCalendar({
  // Options
});

$('#calendar').fullCalendar('gotoDate', currentDate);
49
Brandon

Vous devez utiliser les options 'année', 'mois' et 'date' lors de l'initialisation pour spécifier la valeur de date initiale utilisée par fullcalendar:

$('#calendar').fullCalendar({
 year: 2012,
 month: 4,
 date: 25
});  // This will initialize for May 25th, 2012.

Voir la fonction setYMD(date,y,m,d) dans le fichier fullcalendar.js; Notez que les fonctions JavaScript setMonth, setDate et setFullYear sont utilisées. Par conséquent, la valeur de votre mois doit être basée sur 0 (Jan étant 0).

[~ # ~] met à jour [~ # ~] : Comme d'autres l'ont noté dans les commentaires, la manière correcte de procéder (V3 au moment de l'écriture de cette modification) est d'initialiser la propriété defaultDate à une valeur qui est

tout ce que le constructeur Moment accepte, y compris une chaîne de date ISO8601 telle que "2014-02-01"

comme il utilise Moment.js. Documentation ici .

Exemple mis à jour:

$('#calendar').fullCalendar({
    defaultDate: "2012-05-25"
});  // This will initialize for May 25th, 2012.
82
Jammerms

Selon le commentaire de machineAddict, à partir de la version 2 et ultérieure, year, month and day ont été remplacés par defaultDate , qui est un Moment , supportant les constructeurs tels que ISO 8601 chaîne de date ou une époque Unix.

Donc, par exemple pour initialiser le calendrier avec une date donnée:

$('#calendar').fullCalendar({
    defaultDate: moment('2014-09-01'),
    ...
});
29
StuartLC

Vous pouvez simplement passer un objet Date:
Pour la date actuelle:

$('#calendar').fullCalendar({
    defaultDate: new Date()
});

Pour une date précise '2016-05-20':

$('#calendar').fullCalendar({
    defaultDate: new Date(2016, 4, 20)
});
5
CIRCLE

J'ai eu plus de chance avec l'appel du gotoDate dans le callback viewRender:

$('#calendar').fullCalendar({
  firstDay: 0,
  defaultView: 'basicWeek',
  header: {
    left: '',
    center: 'basicDay,basicWeek,month',
    right:  'today prev,next'
  },
  viewRender: function(view, element) {
    $('#calendar').fullCalendar( 'gotoDate', 2014, 4, 24 );
  }
});

L'appel de gotoDate en dehors du rappel n'a pas eu les résultats escomptés en raison d'une situation de concurrence critique.

3
Eric Parshall

Dans la version 2.1.1, cela fonctionne:

$('#calendar').fullCalendar({
// your calendar settings...
});

$('#calendar').fullCalendar('gotoDate', '2014-05-01');

Documentation sur l'instant format heure/date: http://fullcalendar.io/docs/utilities/Moment/ Documentation sur les mises à niveau de la version 2: https://github.com/arshaw/fullcalendar/wiki/Mise à niveau vers v2

2
BAAC

Si vous ne voulez pas charger le calendrier deux fois et que vous n'avez pas de version dans laquelle defaultDate est implémenté, procédez comme suit:

Changer la méthode suivante:

function Calendar(element, options, eventSources) { ... var date = new Date(); ... }

à:

function Calendar(element, options, eventSources) { ... var date = options.defaultDate ? options.defaultDate : new Date(); ... }

0
Jan Hoeppner