CODEWITHSUNDEEP
javascriptfullcalendar
hosselausso
hosselausso

Reputation: 1077

Fullcalendar move only by 1 day (prev/next) in week view

Is there a way in fullcalendar on the week view to move by 1 day (next/prev buttons) instead of jumping 1 week back and forth?

The reason behind is because when I create an event on the week view I am limited to the last day and can't prolong it to the next week...

Upvotes: 1

Views: 2149

Answers (3)

user2658814
user2658814

Reputation: 41

They now have added dateIncrement as a option.

$('#calendar').fullCalendar({
  header: {
    left: 'today prev,next',
    center: 'title',
    right: 'CustomW,CustomF,CustomS',
  },
  views: {
    CustomW: {
      type: 'timelineWeek',
      duration: { days: 7 },
      buttonText: 'Week',
      dateIncrement: { days: 1 },
    },
    CustomF: {
      type: 'timelineWeek',
      duration: { days: 15 },
      buttonText: '15 day',
      dateIncrement: { days: 4 },
    },
    CustomS: {
      type: 'timelineMonth',
      duration: { days: 30 },
      buttonText: 'Month',
      dateIncrement: { days: 10 },
    },
  },

Upvotes: 2

Craig Howell
Craig Howell

Reputation: 1184

Okay I figured out how to make this work for both subtraction and addition. I had to alter the fullcalendar.js file itself which means there could be some other complications as I have not tested this beyond clicking the next and previous buttons. I would not recommend doing this approach if you plan on utilizing more than one view.

Force currentview to change on click

Comment out lines 9741 - 9747 and 9759 This allows the currentview to change when clicking the next button even though you haven't actually left the currentview

Previous Click

Line 7931 needs to be changed to

date.clone().startOf('day').subtract(1)

Next Click

Line 7939 needs to change to 

date.clone().startOf('day').add(1, 'day')

Upvotes: 1

Pranav
Pranav

Reputation: 206

You can create custom view like this:

$('#calendar').fullCalendar({
header: {
    center: 'month,basicWeekOneDay' // buttons for switching between views
},
views: {
    basicWeekOneDay: {
        type: 'basicWeek',
        duration: { days: 1 },
        buttonText: '1 day'
    }
}

});

Here is fiddle for the same: https://jsfiddle.net/raj20090/j99f7zqw/2/

Upvotes: 0

Related Questions