CODEWITHSUNDEEP
jqueryfullcalendar
Sagar Thakkar
Sagar Thakkar

Reputation: 137

How to customize the full calendar for weekday view?

How can we get this type of view using a full calendar?only weekdays in header

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

Upvotes: 0

Views: 4111

Answers (3)

saleh asadi
saleh asadi

Reputation: 105

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

  1. hide sunday by putting hiddenDays property like this: hiddenDays: [0]
  2. set dateAlignment property like this: dateAlignment: 'week'
  3. 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

enter image description here

Upvotes: 1

ADyson
ADyson

Reputation: 61904

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

Upvotes: 0

danarthedestroyer
danarthedestroyer

Reputation: 11

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/

Upvotes: 0

Related Questions