Is it possible to start the calendar on a specific day?

Event calendars & schedulers
1

I have a situation where each calendar displays 2-3 weeks of events only. I’d like to be able to see all of the events on one calendar. So if the events range from the 17th of March to the 3rd of April the calendar would only show those 3 weeks.

Is that possible?

2

Hi @heather,

Could you explain the context a bit more? In which Event calendar type you want to show the events? Do you want to set a range and display just the events inside this range?

3

Month calendar. But I just want to show the weeks that are in the range, not full month calendar with blank weeks where there’s no events. Does that make sense?

4

Hi @heather,

If you want to display a certain number of weeks and not the whole month, you can use the week view with the size option. Here you can find an example, how it works: https://demo.mobiscroll.com/jquery/eventcalendar/month-week-view

You can define a range with the min and max options.

5

Having a few issues with this…

  1. The calendar doesn’t start on the min date. I’ve tried a few different min/max values and it always starts the same, ie with two weeks of events at the bottom of the calendar. If I change it to 4 weeks the calendar will start on Sunday the 29th.
  2. Ideally I’d like the calendar to show larger month cells, not more agenda when showing only a few weeks. I understand that’s a function of the week view, and I see why it functions that way, I’d just like the option to be able to reverse that
  3. Dates before the min and after the max are not disabled. I can click on them and log to the console.

There’s a huge chance I’m doing something wrong here but I can’t see what it could be.

                 view: { 
                calendar: {
                    labels: true,
                    type: 'week',
                    size: 3,
                    min: new Date(2021, 09, 17),
                    max: new Date(2021, 09, 26)
                    
                },
                
             agenda: { type: 'month' }
            },

image
image2376×1494 184 KB

6

Hi @heather,

Please find the answers below:

  1. Yes, the calendar doesn’t start on the min date, but it will be included in the 4 week view.

  2. We do not have an option for this, but you can increase the cell sizes with custom CSS.

  3. The min and max options needs to be called outside the view option, for example:

     ...
 view: {
     calendar: {
         labels: true,
         type: 'week',
         size: 3,

     },
     agenda: {
         type: 'month'
     }
 },
 min: new Date(2021, 9, 17),
 max: new Date(2021, 9, 26),
 ...