x-calendar demo

Default:

<x-calendar></x-calendar>

Default with controls:

<x-calendar controls></x-calendar>

With custom span:

<x-calendar span=3 controls></x-calendar>

Starting the week with Monday instead:

<x-calendar controls first-weekday-num=1></x-calendar>

With initial view (June) only:

<x-calendar view="Jun 9, 2013" controls></x-calendar>

With initial chosen (July) only:

<x-calendar chosen="Jun 4, 2013" controls></x-calendar>

With both initial view (June) and chosen (July):

<x-calendar view="Jun 9, 2013" chosen="Jul 4, 2013" controls></x-calendar>

init with multi chosen (with multiple attribute):

<x-calendar chosen='[["Jun 4 2013", "Jun 10, 2013"], "June 17 2013", ["Jun 24, 2013","06/26/2013"]]' controls multiple></x-calendar>

init with multi chosen (without multiple attribute):

<x-calendar chosen='[["Jun 4 2013", "Jun 10, 2013"], "June 17 2013", ["Jun 24, 2013","06/26/2013"]]' controls></x-calendar>

notoggle (see console to see how toggle events no longer occur due to UI interaction)

<x-calendar controls notoggle></x-calendar>

Custom stylings demo:

Demo of using API hooks to handle displaying event data (see source for setup JS):

Selected Date: None

Demo of customizing labels (see source for setup JS):