web-dev-qa-db-fra.com

Année Voir dans le plugin jquery Fullcalendar

J'ai commencé une YearView en fullcalendar (dérivée de la `` MonthView '' de base, nécessaire pour afficher des événements plus longs tels que les vacances scolaires), et je pourrais utiliser une main si quelqu'un est déjà familier avec la façon dont les événements sont affichés sur une vue.

  1. À l'aide de 'BasicEventRenderer', comment remplir le 'segmentContainer' pour 'DayEventRenderer'?
  2. Et quand dois-je initialiser la date de début et de fin par défaut pour délimiter l'année active? (le mois de départ pourrait être changé, et ce serait bien de pouvoir garder la surbrillance sur le mois en cours et le jour en cours).

Voir ma fourchette github à https://github.com/Paulmicha/fullcalendar

-> l'exemple de fichier est https://github.com/Paulmicha/fullcalendar/blob/master/tests/year-view-test-01.html

enter image description here

javascriptjqueryjquery-pluginsfullcalendar
33
Paul

Documentation FullCalendar: http://arshaw.com/fullcalendar/docs/

Chargement des événements au format JSON: http://arshaw.com/fullcalendar/docs/event_data/events_json_feed/

Événement de rendu: http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/

Exemple d'événement de rendu:

fc.fullCalendar('renderEvent', {
    'id': 1,
    'title': 'Test Event 1',
    'start': '2009-11-05T13:15:30Z',
    'end': '2009-11-05T13:30:00Z'
});

Limiter l'affichage des mois disponibles: Fullcalendar limiter l'affichage des mois disponibles?

10
Eduardo Cuomo

Alternativement, si vous avez besoin de l'année, affichez quelque chose comme ceci: enter image description here

Vous pouvez l'installer via npm https://www.npmjs.com/package/fullcalendar-year-view

Pas:

cd yourFileLocation
npm init (press enter)
npm i fullcalendar-year-view

Pour obtenir les fichiers lib, accédez à yourFileLocation/node_modules/fullcalendar-year-view/dist/

Ou bien, vous pouvez utiliser browserify pour votre page

Inclure les fichiers lib css & js sur votre page

Enfin, utilisez la vue "année"

$('#calendar').fullCalendar({
  header: {
    left: 'prev,next today',
    center: 'title',
    right: 'year,month,basicWeek,basicDay'
  }
  ....
2
Devsullo

Je pense qu'une alternative pour votre interface utilisateur serait bootstrap-year-calendar . Il vous permet de visualiser des années entières et de placer une/plusieurs valeurs par jour, MAIS les valeurs ne seraient visibles qu'au survol ou au clic.

Pour mon besoin, il a fait l'affaire.

2
tabacitu