web-dev-qa-db-fra.com

Calendrier complet montrant les événements sous forme de points

J'essaie de modifier la conception d'un calendrier en utilisant le calendrier complet. Ce que je veux réaliser, c'est que les événements visibles qui peuvent tenir sur le calendrier sont affichés tels quels, et les événements cachés (événements qui se sont effondrés en "+2 autres") sous forme de points. Voici à quoi cela ressemble jusqu'à présent:

var dayArray = [];

$(function() {

  var todayDate = moment().startOf('day');
  var YM = todayDate.format('YYYY-MM');
  var YESTERDAY = todayDate.clone().subtract(1, 'day').format('YYYY-MM-DD');
  var TODAY = todayDate.format('YYYY-MM-DD');
  var TOMORROW = todayDate.clone().add(1, 'day').format('YYYY-MM-DD');
  var NEXTMONTH = todayDate.clone().add(1, 'month').format('YYYY-MM');

  $('#calendar').fullCalendar({
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay,listWeek'
    },
    editable: true,
    eventLimit: true, // allow "more" link when too many events
    navLinks: true,
    timeFormat: 'HH:mm',
    slotLabelFormat: 'HH:mm',
    views: {
    basic: {
      // options apply to basicWeek and basicDay views
    },
    agenda: {
      // options apply to agendaWeek and agendaDay views
    },
    week: {
      columnHeaderFormat: 'ddd D',
      titleFormat: 'DD MMM YYYY'
    },
    day: {
      // options apply to basicDay and agendaDay views
    }
  },
    events: [
      {
        title: 'The AI Summit 2016',
        start: YM + '-03',
        end: YM + '-06',
        backgroundColor: "#BCE4FD",
        borderColor: "#26A8FB"
      },
      {
        title: 'Spring 2016',
        start: YM + '-09',
        end: YM + '-14',
        backgroundColor: "#BCE4FD",
        borderColor: "#26A8FB"
      },
      {
        title: 'Virtual Assistant Summit',
        start: YM + '-17',
        end: YM + '-20',
        backgroundColor: "#FFBCBA",
        borderColor: "#D9624F"
      },
      {
        title: "O'Reilly Summit 2016",
        start: YM + '-23',
        end: YM + '-26',
        backgroundColor: "#FFBCBA",
        borderColor: "#D9624F"
      },
      {
        title: 'SIGCHI 2016 Conference',
        start: YM + '-18',
        backgroundColor: "#FFBCBA",
        borderColor: "#D9624F"
      },
      {
        title: 'Les Inggris 2016 Q4',
        start: YM + '-11',
        backgroundColor: "#BCE4FD",
        borderColor: "#26A8FB"
      },
      {
        title: 'Minds Mastering Mac',
        start: YM + '-05',
        end: YM + '-07',
        backgroundColor: "#eee",
        borderColor: "#aaa"
      },
      {
        title: 'AAAI-16',
        start: YM + '-18',
        end: YM + '-20',
        backgroundColor: "#eee",
        borderColor: "#aaa"
      },
      {
        title: 'Service Experience',
        start: YM + '-26',
        end: YM + '-29',
        backgroundColor: "#eee",
        borderColor: "#aaa"
      },
      {
        title: 'Les Bahasa Perancis',
        start: YM + '-26',
        backgroundColor: "#B3EFDA",
        borderColor: "#00c983"
      },
      {
        title: 'SMS Las Vegas 2016',
        start: YM + '-27',
        backgroundColor: "#DACAFD",
        borderColor: "#8652FB"
      },
      {
        title: 'Leadership Training',
        start: YM + '-27',
        backgroundColor: "#DACAFD",
        borderColor: "#8652FB"
      },
      {
        title: 'Leadership Training 2',
        start: YM + '-28',
        end: YM + '-30',
        backgroundColor: "#DACAFD",
        borderColor: "#8652FB"
      },
      {
        title: 'Leadership Camp Winter 2016',
        start: YM + '-27',
        backgroundColor: "#FFBCBA",
        borderColor: "#D9624F"
      },
      {
        title: 'English Course',
        start: YM + '-27',
        backgroundColor: "#FFBCBA",
        borderColor: "#D9624F"
      },
      {
        title: 'Sharing Session Hadoop',
        start: NEXTMONTH + '-02',
        backgroundColor: "#DACAFD",
        borderColor: "#8652FB"
      },
    ],
    eventTextColor: "#333",
    /*
    eventAfterAllRender: function() {
        
        var events = $('#calendar').fullCalendar('clientEvents');
        console.log(events);
        
        //get all dates with events
        var startDateWithEvent = [];
        var endDateWithEvent = [];
        for (var i = 0; i < events.length; i++) {
          startDateWithEvent[i] = events[i].start._i;
          endDateWithEvent[i] = events[i].end._i;
        }
        startDateWithEvent = startDateWithEvent.Push(endDateWithEvent);
        var dateWithEvent = startDateWithEvent.filter(function(item, pos) {
          return startDateWithEvent.indexOf(item) == pos;
        });
        console.log(dateWithEvent);
      
        //get event colors of each date
        for (var i = 0; i < dateWithEvent.length; i++) {
          for (var j = 0; j < events.length; j++) {
            if (dateWithEvent[i] == events[j].start._i) {
              var eventObject = {};
              eventObject.date = dateWithEvent[i];
              eventObject.title = events[j].title;
              eventObject.backgroundColor = events[j].backgroundColor;
              eventObject.borderColor = events[j].borderColor;
              dayArray.Push(eventObject);
            }
          }
        }
      
        //get hidden only events
        for (var i = 0; i < dayArray.length; i++) {
          
        }
    }*/
  });
});
#calendar table {
  display: table;
  border: none !important;
}

.calendar-example {
  line-height: 1.3;
}

.calendar-example h2 {
  font-size: 22px;
}

.calendar-example a[data-goto] {
  color: #444;
}

.fc-title {
  font-size: 12px !important; 
}

.fc-center h2 {
 font-size: 22px; 
 color: #00c983;
 font-weight: 400;
}

#calendar thead {
  border: none !important; 
}

.fc-day-header {
  border: none !important;
  font-size: 13px;
}

.fc-head {
  line-height: 40px;
  border: none !important;
}

.fc-body {
  background-color: #f8f8f8;
}

.fc-day {
  /*border-left: none !important;
  border-right: none !important;*/
}

.fc-head-container {
  /*border-right: none !important;
  border-left: none !important;*/
}

.fc-day-number {
  font-size: 13px;
  margin-right: 4px;
  margin-top: 4px;
  width: 24px;
  height: 24px;
  border-radius: 3px;
  line-height: 24px;
  text-align: center;
  color: #777;
}

.fc-day-number:hover {
  text-decoration: none !important;
  color: #777;
}

.fc-today {
  background-color: #E6FAF3 !important; 
}

.fc-today .fc-day-number {
  background-color: #00c983; 
  font-weight: 700;
  color: #fff;
}

.fc-widget-content {
  border-right: solid 8px #f8f8f8 !important;
  border-left: solid 8px #f8f8f8 !important;
}

.fc-more-cell > div {
 text-align: right;
  margin-right: 8px;
  font-size: 14px;
  color: #777;
}

.fc-more-cell > div > a:hover {
  text-decoration: none;
  color: #333;
}

.fc-content {
  padding: 1px 4px;
}

.fc-widget-header {
  border: none !important; 
}

.fc-time {
  font-size: 12px;
  font-weight: 700;
}

.fc-time.fc-widget-content {
  border: none;
}

.fc-time-grid .fc-slats .fc-minor td {
  border-top-style: none !important; 
}

.fc-axis.fc-time.fc-widget-content {
  transform: translate(-8px, -12px);
}

.fc-popover.fc-more-popover,
.fc-popover.fc-more-popover .fc-widget-header,
.fc-popover.fc-more-popover .fc-widget-content {
  background-color: #fff !important; 
}

.fc-axis.fc-widget-content {
  font-size: 12px;
  font-weight: 700;
}

#calendar .dot-event {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-block;
    margin-left: 10px;
    vertical-align: text-bottom;
}

.red {
  width: 10px;
  height: 10px;
  background-color: "#000";
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css">

<div id="calendar"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>

Existe-t-il un moyen d'obtenir les propriétés (en particulier les couleurs de contour et d'arrière-plan) de chaque événement caché? Parce que je veux représenter les événements cachés sous forme de points, comme ceci:

enter image description here

J'ai essayé de récupérer tous les événements en utilisant var events = $('#calendar').fullCalendar('clientEvents'); mais je n'ai rien vu qui différencie les événements cachés et visibles. Il n'y a rien sur la documentation qui est à distance pour m'aider sur ce problème.

Si ce n'est pas possible, donnez-moi au moins une idée de la façon de transformer tous les événements en points uniquement sur un écran mobile/plus petit. Changer le .js du FullCalendar n'est pas une solution possible pour le moment, car je veux l'afficher sur l'extrait. De plus, existe-t-il un moyen de collecter des événements chaque jour? Je peux peut-être partir de là.

Je suis désolé pour le mauvais code car je ne suis pas développeur, et c'est la première fois que j'utilise ce plugin. Toute aide appréciée, merci! :)

javascriptjqueryhtmlcssfullcalendar
23
Dolorosa

Au lieu d'obtenir des événements masqués, vous pouvez peut-être essayer de modifier le style des événements en fonction du type de vue. Ensuite, dans la vue mensuelle, les événements seraient des points. Vous pouvez utiliser le rappel eventRender ( https://fullcalendar.io/docs/eventRender )

Vous pouvez également filtrer tous les événements clients chargés par la vue actuelle et obtenir ses propriétés à l'aide de $('#calendar').fullCalendar('clientEvents', filter) ( https://fullcalendar.io/docs/clientEvents )

8
Mariana Bianchi Marques

Exécutez l'extrait de code et voyez si c'est ce que vous vouliez?

La partie CSS:

  1. J'ai ajouté un nouveau CSS que vous pouvez trouver après /* New CSS */ dans l'extrait. J'ai commenté le #calendar .dot-event, mais vous pouvez styliser les points via .fc-month-view .fc-day .fc-event-dot. (C'est-à-dire que j'ai utilisé les styles de points existants/class dans FullCalendar)

La partie JS:

  1. J'ai supprimé le dayArray car ce n'est pas nécessaire. Ensuite, j'ai défini eventLimit sur (et cela doit être) false. J'ai également utilisé eventAfterRender et pas eventAfterAllRender, et les seuls JS que j'ai ajoutés sont dans le eventAfterRender fonction de rappel.

La partie HTML:

Fondamentalement, aucun changement. (sauf ceux modifiés dynamiquement via JavaScript)

(Vous pouvez également comparer mon extrait de code avec le vôtre pour voir ce qui a changé.)

$(function() {

      var todayDate = moment().startOf('day');
      var YM = todayDate.format('YYYY-MM');
      var YESTERDAY = todayDate.clone().subtract(1, 'day').format('YYYY-MM-DD');
      var TODAY = todayDate.format('YYYY-MM-DD');
      var TOMORROW = todayDate.clone().add(1, 'day').format('YYYY-MM-DD');
      var NEXTMONTH = todayDate.clone().add(1, 'month').format('YYYY-MM');

      $('#calendar').fullCalendar({
        header: {
          left: 'prev,next today',
          center: 'title',
          right: 'month,agendaWeek,agendaDay,listWeek'
        },
        editable: true,
        eventLimit: false, // Always FALSE
        navLinks: true,
        timeFormat: 'HH:mm',
        slotLabelFormat: 'HH:mm',
        views: {
        basic: {
          // options apply to basicWeek and basicDay views
        },
        agenda: {
          // options apply to agendaWeek and agendaDay views
        },
        week: {
          columnHeaderFormat: 'ddd D',
          titleFormat: 'DD MMM YYYY'
        },
        day: {
          // options apply to basicDay and agendaDay views
        }
      },
        events: [
          {
            title: 'The AI Summit 2016',
            start: YM + '-03',
            end: YM + '-06',
            backgroundColor: "#BCE4FD",
            borderColor: "#26A8FB"
          },
          {
            title: 'Spring 2016',
            start: YM + '-09',
            end: YM + '-14',
            backgroundColor: "#BCE4FD",
            borderColor: "#26A8FB"
          },
          {
            title: 'Virtual Assistant Summit',
            start: YM + '-17',
            end: YM + '-20',
            backgroundColor: "#FFBCBA",
            borderColor: "#D9624F"
          },
          {
            title: "O'Reilly Summit 2016",
            start: YM + '-23',
            end: YM + '-26',
            backgroundColor: "#FFBCBA",
            borderColor: "#D9624F"
          },
          {
            title: 'SIGCHI 2016 Conference',
            start: YM + '-18',
            backgroundColor: "#FFBCBA",
            borderColor: "#D9624F"
          },
          {
            title: 'Les Inggris 2016 Q4',
            start: YM + '-11',
            backgroundColor: "#BCE4FD",
            borderColor: "#26A8FB"
          },
          {
            title: 'Minds Mastering Mac',
            start: YM + '-05',
            end: YM + '-07',
            backgroundColor: "#eee",
            borderColor: "#aaa"
          },
          {
            title: 'AAAI-16',
            start: YM + '-18',
            end: YM + '-20',
            backgroundColor: "#eee",
            borderColor: "#aaa"
          },
          {
            title: 'Service Experience',
            start: YM + '-26',
            end: YM + '-29',
            backgroundColor: "#eee",
            borderColor: "#aaa"
          },
          {
            title: 'Les Bahasa Perancis',
            start: YM + '-26',
            backgroundColor: "#B3EFDA",
            borderColor: "#00c983"
          },
          {
            title: 'SMS Las Vegas 2016',
            start: YM + '-27',
            backgroundColor: "#DACAFD",
            borderColor: "#8652FB"
          },
          {
            title: 'Leadership Training',
            start: YM + '-27',
            backgroundColor: "#DACAFD",
            borderColor: "#8652FB"
          },
          {
            title: 'Leadership Training 2',
            start: YM + '-28',
            end: YM + '-30',
            backgroundColor: "#DACAFD",
            borderColor: "#8652FB"
          },
          {
            title: 'Leadership Camp Winter 2016',
            start: YM + '-27',
            backgroundColor: "#FFBCBA",
            borderColor: "#D9624F"
          },
          {
            title: 'English Course',
            start: YM + '-27',
            backgroundColor: "#FFBCBA",
            borderColor: "#D9624F"
          },
          {
            title: 'Sharing Session Hadoop',
            start: NEXTMONTH + '-02',
            backgroundColor: "#DACAFD",
            borderColor: "#8652FB"
          },
        ],
        eventTextColor: "#333",
        eventAfterRender: function( event, element, view ){
          // Enable for the 'month' view only.
          if ( 'month' !== view.name ) {
            return;
          }

          var a = moment( event.start, 'YYYY-MM-DD' ),
            b = moment( event.end, 'YYYY-MM-DD' ),
            duration = moment.duration( b.diff( a ) ),
            row = element.closest( '.fc-row' ),
            d = a.clone(), i, c;

          var title = event.title;
          if ( b.isValid() ) {
            title += ' (' + $.fullCalendar.formatRange( a, b, 'MMM D YYYY' ) + ')';
          }

          // Add the event's "dot", styled with the appropriate background color.
          for ( i = 0; i <= duration._data.days; i++ ) {
            if ( 0 === 1 ) {
              c = a;
            } else {
              d.add( 1, 'days' );
              c = d;
            }

            row.find( '.fc-day[data-date="' + c.format( 'YYYY-MM-DD' ) + '"]' )
              .append(
                '<a href="#" class="fc-event-dot" onclick="return false;" ' +
                  'style="background-color: ' + event.backgroundColor + ';" ' +
                  'title="' + title + '"></a>'
              );
          }

          // Here you can either completely remove the default element, or just
          // hide it visually on screen.
          element.remove();
          //element.addClass( 'hidden' );
        }
          });
    });
#calendar table {
  display: table;
  border: none !important;
}

.calendar-example {
  line-height: 1.3;
}

.calendar-example h2 {
  font-size: 22px;
}

.calendar-example a[data-goto] {
  color: #444;
}

.fc-title {
  font-size: 12px !important; 
}

.fc-center h2 {
 font-size: 22px; 
 color: #00c983;
 font-weight: 400;
}

#calendar thead {
  border: none !important; 
}

.fc-day-header {
  border: none !important;
  font-size: 13px;
}

.fc-head {
  line-height: 40px;
  border: none !important;
}

.fc-body {
  background-color: #f8f8f8;
}

.fc-day {
  /*border-left: none !important;
  border-right: none !important;*/
}

.fc-head-container {
  /*border-right: none !important;
  border-left: none !important;*/
}

.fc-day-number {
  font-size: 13px;
  margin-right: 4px;
  margin-top: 4px;
  width: 24px;
  height: 24px;
  border-radius: 3px;
  line-height: 24px;
  text-align: center;
  color: #777;
}

.fc-day-number:hover {
  text-decoration: none !important;
  color: #777;
}

.fc-today {
  background-color: #E6FAF3 !important; 
}

.fc-today .fc-day-number {
  background-color: #00c983; 
  font-weight: 700;
  color: #fff;
}

.fc-widget-content {
  border-right: solid 8px #f8f8f8 !important;
  border-left: solid 8px #f8f8f8 !important;
}

.fc-more-cell > div {
 text-align: right;
  margin-right: 8px;
  font-size: 14px;
  color: #777;
}

.fc-more-cell > div > a:hover {
  text-decoration: none;
  color: #333;
}

.fc-content {
  padding: 1px 4px;
}

.fc-widget-header {
  border: none !important; 
}

.fc-time {
  font-size: 12px;
  font-weight: 700;
}

.fc-time.fc-widget-content {
  border: none;
}

.fc-time-grid .fc-slats .fc-minor td {
  border-top-style: none !important; 
}

.fc-axis.fc-time.fc-widget-content {
  transform: translate(-8px, -12px);
}

.fc-popover.fc-more-popover,
.fc-popover.fc-more-popover .fc-widget-header,
.fc-popover.fc-more-popover .fc-widget-content {
  background-color: #fff !important; 
}

.fc-axis.fc-widget-content {
  font-size: 12px;
  font-weight: 700;
}

/*#calendar .dot-event {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-block;
    margin-left: 10px;
    vertical-align: text-bottom;
}*/

.red {
  width: 10px;
  height: 10px;
  background-color: "#000";
}

/* New CSS */

.fc-month-view .fc-row .fc-day {
  /* Aligns the event dots at the bottom of the cell. */
  vertical-align: bottom;
}

.fc-month-view .fc-day .fc-event-dot {
  cursor: default;
  /* Gives some spacing between the dots in a cell. */
  margin-right: 2px;
}

.fc-month-view .hidden {
  display: none;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css">

<h3>Hover over the dot.</h3>

<div id="calendar"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
4
Sally CJ

dans cette situation, le calendrier complet fournit la fonction de rendu d'événement.

eventRender: function(event, element) {

    console.log(event);//here each event printed one bu one as render.start 
                        //and end date of event
     if(event.end){
        ///check the start and end date difference

       }else {
         //No end date for event       
       }
       if(event.backgroundColor == '#BCE4FD'){

           }     }
3
hazan kazim

Ce n'est pas une solution complète, mais cela peut vous aider en tant que solution rapide qui vous aidera à y arriver.

Vous pouvez convertir les liens "plus" en un nombre correspondant de points sur lesquels vous pouvez cliquer en tant que groupe pour afficher le popover en procédant comme suit:

Ensemble eventLimitText: '' pour supprimer le texte "plus" (facilite l'obtention du nombre d'événements du texte). Ensuite, obtenez tous les liens "plus" et convertissez-les en nombre de points approprié.

Exemple JS:

$('.fc-more').each((i, elem) => {
  let $elem = $(elem);
  let num = $elem.text();
  num = parseInt(num.substring(1));
  $elem.text('');
  for (let j = 0; j < num; j++) {
    $elem.append('<div class="dot"></div>');
  }
});

Exemple CSS:

.dot {
  background-color: blue;
  width: 8px;
  height: 8px;
  margin-right: 2px;
  border-radius: 50%;
  display: inline-block;
}

Il est important de noter que cela ne crée pas un point cliquable individuellement qui correspond à un événement unique correspondant à sa couleur d'événement. Accéder à cette solution peut ne pas être trivial (vous devrez peut-être définir eventLimit: false et parcourez tous les clientEvents pour déterminer quels jours ont plus d'événements que vous le souhaitez, convertissez les événements supplémentaires en points cliquables individuellement en fonction de la couleur de l'objet d'événement et d'autres propriétés, créez votre propre popover à afficher en un clic , etc).

2
benvc

Tout d'abord le titre de votre question Le calendrier complet obtient les propriétés des événements cachés n'est pas votre exigence exacte. Parce qu'à cet égard, @Mariana a déjà répondu.

Votre exigence réelle est d'afficher les événements sous forme de points en utilisant le calendrier complet.

La réponse à cette exigence est que actuellement Calendrier complet ne fournit pas de fonctionnalité pour afficher les événements sous forme de points colorés .

Mais vous avez ci-dessous des alternatives pour y parvenir:

  1. Utilisez Bootstrap Calendar qui est facile à utiliser et à intégrer également. GitHub
  2. Utilisez Angular Bootstrap Calendar mais pour cela, vous devez utiliser AngularJS dans votre projet. La capture d'écran de la sortie attendue dans votre question est de Angular Bootstrap Calendar.
  3. Personnaliser bibliothèque de calendrier complète selon vos besoins (bien sûr, cela prend du temps et n'est pas une bonne solution)

J'espère que ceci vous aidera.

2
VicJordan