CODEWITHSUNDEEP
jqueryangularfullcalendar
user2194080
user2194080

Reputation: 21

How to set different firstDay on different view (Month,Week) in Full Calendar

I want to set current date to start week view in full calendar.

Following way we are archive for all view(Month and Week): 

calendar: {
   firstDay:moment().day();
   }

Upvotes: 1

Views: 3005

Answers (5)

Engine194
Engine194

Reputation: 1

I searched to doc of fullcalendar and found the usage of firstDay option when you init your calendar:

var calendar = new FullCalendar.Calendar(calendarEl, {
  initialView: 'dayGridMonth',
  ...
  firstDay: 1,
  ...
}

Sunday = 0, Monday = 1, Tuesday = 2, etc.
Before initiating the calendar, let take a function to get day of the week (we use getDay() function):

function getDayNumber () {
  var today = new Date();
  return today.getDay();
}

Then, you can add this function to the options of fullCalendar:

var calendar = new FullCalendar.Calendar(calendarEl, {
  initialView: 'dayGridMonth',
  ...
  firstDay: getDayNumber(),
  ...
}

Now whenever you open to calendar, the current day always is the start day of the week. Have fun =)

Upvotes: 0

show-me-the-code
show-me-the-code

Reputation: 1553

Although it's been a while since the question was asked, this may come handy to someone else in the future. In my case, I ended up dynamically updating the option firstDay by checking current view on viewRender callback.

var currentView = '',
  d = new Date(),
  today = d.getDay(),
  dow = 1;
$('#calendar').fullCalendar({
  header: {
    left: 'prev,next',
    center: 'title',
    right: 'month,agendaWeek'
  },
  defaultDate: d,
  navLinks: true,
  firstDay: 1, //Monday
  viewRender: function(view) {
    if (view && view.name !== currentView) {
      if (view.name === 'agendaWeek') {
        dow = today;
      } else {
        dow = 1;
      }
      setTimeout(function() {
        $("#calendar").fullCalendar('option', 'firstDay', dow);
      }, 10);
    }
    if (view) {
      currentView = view.name;
    }
  }
});

Here's a working example. Switch between week and month views and the first day will change from Monday on the month view to whatever the current day is on the week view.

Upvotes: 1

ADyson
ADyson

Reputation: 62098

Having tested this, it doesn't appear that firstDay can be set for a specific view. Correct me if I'm wrong. I tried doing it using views-specific options, as per https://fullcalendar.io/docs/views/View-Specific-Options/ :

views: {
        agendaWeek: { // name of view
            firstDay: moment().day()
        }
    }

but it doesn't seem to take effect on the view in question. I tried with other views (e.g. month) as well and that didn't work either. So I don't think you can define "firstDay" differently for each view.

This is just my opinion, but I think having a different first day for different views would probably be confusing to users anyway, so that may be a reason why it's not possible.

Upvotes: 0

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41445

you can call a function like this 

function getMonday(d) {
  d = new Date(d);
  var day = d.getDay(),
      diff = d.getDate() - day + (day == 0 ? -6:1); // adjust when day is sunday
  return new Date(d.setDate(diff));
}

 calendar: {
     firstDay:getMonday(new Date())
}

Upvotes: 1

user6222982
user6222982

Reputation:

To set the default view to week view. 

$('#calendar').fullCalendar({
    header: {
    ...
    },
    defaultView: 'month',
    .
    .
}

More about the available views that full calendar provides can be found here

Upvotes: 1

Related Questions