extends ../../layouts/LayoutComponent

append variables
  
  - var today = new Date();
  - var toString = (number) => number.toString().padStart(2, '0');
  - var date = toString(today.getDate())
  - var month = today.getMonth();
  - var currentMonth = month > 11 ? toString(1) : toString(month + 1);
  -
    var events = [
      {
        title: 'Bootcamp',
        start: `${today.getFullYear()}-${currentMonth}-${date}`
      }
    ]

prepend scripts
  script(src=`${CWD}vendors/fullcalendar/index.global.min.js`)

append content
  +PageHeader({title: 'Calendar'})
    p.mt-2 #{name} uses <b>FullCalendar</b> for calendar component. FullCalendar is full-sized drag &amp; drop event calendar.
    a(href='https://fullcalendar.io/docs' target='_blank').btn.btn-link.ps-0.btn-sm  FullCalendar Documentation
      span.fas.fa-chevron-right.ms-1.fs-11
    
  +ComponentCard({
    title: 'Example',
    anchor: true,
    description:`Basic example of FullCalendar with default options in ${name}. You can also pass the extra options using <code>data-calendar </code> attribute.<a href="${CWD}${paths['calendar-app']}" target="_blank">See advanced implementation of fullCalendar </a>`,
    descriptionClass:'mt-2 mb-0'
  }).mb-3
    div(data-calendar!={events})

  .card
    .card-header
      h5.mb-0 Javascript
    .card-body.bg-body-tertiary
      +ComponentCardLib
        script(src=`vendors/fullcalendar/index.global.min.js`)