Full Calendar show events as dots

Question

I'm trying to modify the design of a calendar using Full Calendar. What I want to achieve is the visible events that can fit on the calendar are shown as they are, and the hidden events (events that collapsed into "+2 more") as dots. Here is how it looks so far:

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>

Is there any way to get the properties (especially outline and background colors) of each hidden events? Because I want to represent the hidden events as dots, just like this:

I tried to retrieve all events using var events = $('#calendar').fullCalendar('clientEvents'); but I couldn't see anything that differentiate hidden and visible events. There's nothing on the documentation that is remotely close to help me on this problem.

If that's not possible, at least please give me an idea how to transform all events to dots only on mobile/smaller screen. Changing the .js of the FullCalendar isn't possible solution for now, because I want to display it on snippet. Also, is there any way to collect events each days? Maybe I can go from there.

I'm sorry for the bad code since I'm not a developer, and this is the first time I use this plugin. Any help appreciated, thank you! :)

Answer 1

Maybe, instead of getting hidden events, you could try to change events' style based on the view type. Then, in month view events would be dots. You could use the eventRender callback (https://fullcalendar.io/docs/eventRender)

You can also filter all client events loaded by the current view and get its properties using $('#calendar').fullCalendar('clientEvents', filter) (https://fullcalendar.io/docs/clientEvents)