javascript function




Il calendario completo mostra gli eventi come punti (4)

Esegui lo snippet e vedi se è quello che volevi?

La parte CSS:

  1. Ho aggiunto alcuni nuovi CSS che puoi trovare dopo /* New CSS */ nello snippet. Ho commentato l' #calendar .dot-event , ma puoi .fc-month-view .fc-day .fc-event-dot i punti tramite .fc-month-view .fc-day .fc-event-dot . (Cioè ho usato gli stili / class punti esistenti in FullCalendar)

La parte JS:

  1. Ho rimosso il dayArray perché non è necessario. Quindi imposto eventLimit su (e deve essere) false . Ho anche usato eventAfterRender e non eventAfterAllRender e l'unico JS che ho aggiunto è nella funzione callback eventAfterRender .

La parte HTML:

Fondamentalmente, nessuna modifica. (eccetto quelli modificati dinamicamente tramite JavaScript)

(Puoi anche confrontare il mio snippet con il tuo per vedere cosa è cambiato.)

$(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>

Sto cercando di modificare il design di un calendario utilizzando il calendario completo. Quello che voglio ottenere è che gli eventi visibili che possono essere adattati al calendario vengano mostrati così come sono, e gli eventi nascosti (eventi che sono collassati in "+2 in più") come punti. Ecco come appare finora:

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>

Esiste un modo per ottenere le proprietà (in particolare i contorni e i colori di sfondo) di ogni evento nascosto? Perché voglio rappresentare gli eventi nascosti come punti, proprio come questo:

Ho provato a recuperare tutti gli eventi usando var events = $('#calendar').fullCalendar('clientEvents'); ma non ho potuto vedere nulla che distingua eventi nascosti e visibili. Non c'è nulla nella documentazione che sia lontanamente vicino per aiutarmi in questo problema.

Se ciò non è possibile, almeno per favore mi dia un'idea di come trasformare tutti gli eventi in punti solo su schermo mobile / più piccolo. Cambiare il .js del FullCalendar non è una soluzione possibile per ora, perché voglio mostrarlo sullo snippet. Inoltre, c'è un modo per raccogliere eventi ogni giorno? Forse posso andare da lì.

Mi dispiace per il codice sbagliato dal momento che non sono uno sviluppatore, e questa è la prima volta che uso questo plugin. Qualsiasi aiuto apprezzato, grazie! :)


Forse, invece di ottenere eventi nascosti, potresti provare a cambiare lo stile degli eventi in base al tipo di vista. Quindi, nel mese, gli eventi sarebbero punti. È possibile utilizzare la callback eventRender ( https://fullcalendar.io/docs/eventRender )

Puoi anche filtrare tutti gli eventi client caricati dalla vista corrente e ottenere le sue proprietà usando $('#calendar').fullCalendar('clientEvents', filter) ( https://fullcalendar.io/docs/clientEvents )


Prima di tutto il titolo della tua domanda Il calendario completo ottiene le proprietà degli eventi nascosti non è il tuo esatto requisito. Perché a questo proposito @Mariana ha già risposto.

Il tuo vero requisito è mostrare gli eventi come punti usando il calendario completo.

La risposta a questo requisito è che attualmente il Calendario completo non fornisce funzionalità per visualizzare gli eventi come punti colorati .

Ma hai sotto le alternative per ottenere questo:

  1. Usa il calendario Bootstrap che è facile da usare e da integrare. GitHub
  2. Utilizzare il calendario di bootstrap angolare, ma per questo è necessario utilizzare AngularJS nel progetto. Lo screenshot dell'output previsto nella tua domanda proviene dal calendario Bootstrap angolare .
  3. Personalizza la libreria del calendario completo secondo le tue esigenze (ovviamente questo è il tempo necessario e non una buona soluzione)

Spero che questo ti possa aiutare.


in questa situazione il calendario completo fornisce l'evento Render function.tutti gli eventi che passano attraverso l'evento rendono necessario controllare ogni evento in base a ciò che mette il disegno per punto ecc.

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'){

           }     }                               




fullcalendar