How to customize the full calendar for weekday view?

Question

How can we get this type of view using a full calendar?

As you can see in the image I want only weekdays in a header.

using columnFormat ="dddd" I can set the header but how to set an event for a day? as I don't have a date. — Sagar Thakkar, Jun 12 '17 at 11:06
"how to set an event for a day?". I don't know what you mean. Are you asking how to add events to the calendar? — ADyson, Jun 12 '17 at 13:30
@ADyson No. I know how to render events. but suppose I just want week calendar (as per the picture) then I don't have any specific date events. Now suppose I want to add an event for Monday 9:00-10:00 then what I can set for start and end parameter in an event list? — Sagar Thakkar, Jun 13 '17 at 05:43
if you want to add an event for only a specific Monday then you have to include the date in the start and end parameters for the event, e.g. `start: 2017-06-12 09:00, end: 2017-06-12 10:00`. Or are you saying you want the event to repeat every Monday? — ADyson, Jun 13 '17 at 08:01
@ADyson Yes I want to repeat events on every Monday and for that I am come up with the solution to get the day name whatever the date and set that event. — Sagar Thakkar, Jun 13 '17 at 08:08

score 1 · Answer 1 · answered Jan 09 '21 at 12:02

I know this is old but maybe this answer help someone elese so I put it here. to generate such view you can simply:

hide sunday by putting hiddenDays property like this: hiddenDays: [0]
set dateAlignment property like this: dateAlignment: 'week'
set firstDay property to 1 like this: firstDay: 1

that's all. for more details you can check following urls

https://fullcalendar.io/docs/dateAlignment

https://fullcalendar.io/docs/hiddenDays

danarthedestroyer · Answer 2 · 2017-06-13T02:03:34.460

0

I think you are looking for this:

$('#calendar').fullCalendar({
    defaultView: 'agendaWeek',
    weekends: false // will hide Saturdays and Sundays
});

This can be found in the basic usage docs. https://fullcalendar.io/docs/usage/

edited Jun 13 '17 at 02:03

answered Jun 13 '17 at 01:56

danarthedestroyer

11
2

This will provide the agendaWeek calendar not the day week calendar. check https://fullcalendar.io/views/agendaWeek/ and I don't want to hide any days I just want an all weekday calendar with events. – Sagar Thakkar Jun 13 '17 at 05:44

score 0 · Answer 3 · answered Jun 13 '17 at 08:36

FullCalendar doesn't natively have a complete concept of repeating events. It will render an event across multiple days of the week, but can't repeat them using more sophisticated rules (e.g. "every Monday").

To overcome this, some customisation is required. Fortunately this can be done through the API, without modifying the underlying code. One way is to slightly alter the structure of your event objects, and then write some custom code into the "eventRender" callback in fullCalendar such that it reads the custom data and creates the appropriate repeating events based on the single "event" object that was fed to it.

$(document).ready(function() {
  var repeatingEvents = [{
    "id": "1",
    "title": "Event 1",
    //in "start and "end", only set times of day, not dates. 
    "start": "09:00",
    "end": "10:00",
    //use standard dow property to define which days of the week the event will appear on
    "dow": "1",
    //the custom "ranges" sets when the repetition begins and ends
    "ranges": [{
      "start": "2017-06-01",
      "end": "2017-06-30"
    }],
    "allDay": false
  }, {
    "id": "2",
    "title": "Event 2",
    "start": "10:00",
    "end": "12:00",
    "dow": "2",
    "ranges": [{
      "start": "2017-05-10",
      "end": "2017-07-16"
    }],
    "allDay": false
  }, {
    "id": "3",
    "title": "Event 3",
    "start": "15:00",
    "end": "16:30",
    "dow": "3",
    "ranges": [{
      "start": "2017-06-01",
      "end": "2017-06-30"
    }],
    "allDay": false
  }];

  $('#calendar').fullCalendar({
    hiddenDays: [0], //hide Sundays as per your screenshot
    minTime: "07:00",
    maxTime: "22:00",
    defaultView: 'agendaWeek',
    events: repeatingEvents,
    //custom code to create repeating events from the data
    eventRender: function(event) {
      return (event.ranges.filter(function(range) { // test event against all the ranges

        return (event.start.isBefore(range.end) &&
          event.end.isAfter(range.start));

      }).length) > 0; //if it isn't in one of the ranges, don't render it (by returning false)
    }
  });
});

<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.0/moment.min.js'></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.3.1/fullcalendar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.3.1/gcal.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.3.1/fullcalendar.min.css" rel="stylesheet" media="all" />
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet" media="all" />

<div id='calendar'></div>

Unfortunately this solution does not work with all-Day events, but otherwise I hope it's useful.

P.S. Credit to this answer for the original solution: https://stackoverflow.com/a/29393128/5947043

How to customize the full calendar for weekday view?

3 Answers3