Visible hours and days

Customize the visible days and hours along with the scale of the time grid through the scheduler object under the view option. You can control the days to display (eg. Weekdays), the visible time range (eg. 8AM to 6PM), set the time scale (eg. 30 minutes) and set the labels shown (eg. every 15 minutes).

  • Specify the first and last day - Use the startDay and endDay properties
  • Set the visible time range - Use the startTime and endTime properties
  • Shift the visible time window - Use the startTime and endTime properties to include ranges that extend into the previous or next day
  • Control the visibility of empty columns - Use the hideEmptyColumns property
  • Control the visibility of fully invalid columns - Use the hideInvalidColumns property
  • Control the granularity of the time grid - Use the timeCellStep and timeLabelStep properties
Building a work calendar?  Check out this example →
Download and try example

Demo

Display days from to
This defines which weekdays to display. To set the first day of the week, use the firstDay option instead.
Display hours from to
Set the time scale to
Show time labels for every
Hide empty columns
Hide invalid columns
Show current time indicator
Javascript jQuery Angular React Vue 
$('#calendar').mobiscroll().eventcalendar({
    view: {
        scheduler: { 
            type: 'week',
            startDay: 1,
            endDay: 5,
            startTime: '09:00',
            endTime: '17:00',
            timeCellStep: 60,
            timeLabelStep: 60
            currentTimeIndicator: true,
            hideEmptyColumns: false,
            hideInvalidColumns: false,
       }
    }
});
Preview in fullscreen
Keep your calendar focused. Trim your view. In, you can show only weekdays and business hours, making schedules cleaner and faster.

Duplicate Session

You have signed in on a different machine. To keep everything in sync, you have been signed out of this session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.

Duplicate Session

We noticed you are logged in on a different machine and have closed your old session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.