Virginia Tech® home

Examples of Calendar Widget

Example #1 - Horizonal View with Event Details

<calendar data-calendarid="" data-viewqty="2" data-view="horizontal" data-cssclass="default b-large" data-eventurl="https://technology.pamplin.vt.edu/core-services/digital-communications/ensemble-utilities/calendar-widget/specific-event-example.html"></calendar>

Example #2 - Horizonal View

<calendar data-calendarid="" data-viewqty="3" data-view="horizontal" data-cssclass="dark"></calendar>

Example #3 - Agenda View

<calendar data-calendarid="" data-viewqty="5" data-view="agenda" data-badgecolor="--vt-teal-1s" data-backgroundcolor="inherit" data-cssclass="custom"></calendar>

Example #5 - Horizontal View (with Filter)

<calendar data-calendarid="" data-filtercategory="Meeting" data-viewqty="4" data-view="horizontal" data-badgecolor="--vt-burntOrangeWeb" data-backgroundcolor="--vt-hokieStone" data-cssclass="custom "></calendar>

Example #6 - Horizontal View (Full Width Container)

<calendar data-calendarid="" data-viewqty="6" data-view="horizontal" data-badgecolor="--vt-maroon" data-buttoncolor="--vt-hokieStone-8s" data-buttonlocation="inside" data-backgroundcolor="--vt-hokieStone-5t" data-cssclass="custom " data-calendarurl="https://pamplin.vt.edu"></calendar>

Example #7 - Agenda View (grouping by date & filter)

<calendar data-calendarid="" data-filtercategory="Meeting" data-viewqty="8" data-view="agenda" data-agendagroup="true" data-badgecolor="--vt-burntOrangeWeb" data-buttoncolor="--vt-white" data-backgroundcolor="inherit" data-cssclass="custom b-large"></calendar>

Example #4 - Vertical View

<calendar data-calendarid="" data-viewqty="4" data-view="vertical" data-cssclass="light no-button"></calendar>