FullCalendar is a JS plugin that provides a full-sized, drag & drop event calendar like the one below. It uses AJAX to fetch events on-the-fly and is easily configured to use your own feed format. It is visually customizable with a rich API. Example below demonstrates a default view of the calendar with a basic setup: draggable and editable events, and starting date.

FullCalendar has a number of different "views", or ways of displaying days and events. The following 5 views are all built in to FullCalendar: month, timeGrid, list view, dayGrid, custom views. You can define header buttons to allow the user to switch between them. Also you can set the initial view of the calendar with the defaultView option. The following example demonstrates timeGrid views.

A list view is a type of available views that displays events in a flat list. Only days with events are displayed. A list view displays events during a specific interval of time. There are 4 preset list views: listDay, listWeek, listMonth, and listYear. The following example demonstrates listWeek, listDay and listMonth views.