Calendar

OGX.Calendar is an infinite multi function calendar that can display the content of a schedule in different manners for different views. Views aren't limited to months and days, views can be anything that can be quantified with time*. These views can also use different rendering engines that allows the creation of a multitude of time based components. _* at the time of the documentation only month, week and day views are available but will be extended to custom ranges

OGX.Calendar uses OGX.QuadSwiper so it must be added to your project as well.

Instantiate

 let config = {
      container:_SELECTOR_, //Required, The selector for the target HTML element
      view:_INT_, //Required, the view to display
      views:_ARRAY_, //Required, an array of view
      data:_OBJECT_ //Optional, a schedule data object
 };

 let calendar = new OGX.Calendar(config);

Views

OGX.Calendar comes with a bundle of prebuilt settings commonly used such as month, week and day. OGX.Calendar does not constrain you to a month, week, day approach, you can render as many in the order that you want.

To render a common calendar displaying month by month and swipable left/right, do

  let config = {
       views:[
            {view:OGX.Calendar.VIEW_MONTH, engine:false, config:false}
       ],
       ...
  },

To render a common calendar displaying month by month and swipable left/right, that can also display the current view in day view by swiping down, do

  let config = {
       views:[
            {view:OGX.Calendar.VIEW_MONTH, engine:false, config:false},
            {view:OGX.Calendar.VIEW_DAY, engine:false, config:false}
       ],
       ...
  },

To render a common calendar displaying month by month and swipable left/right, that can also display in view and day view, do

  let config = {
       views:[
            {view:OGX.Calendar.VIEW_MONTH, engine:false, config:false},
            {view:OGX.Calendar.VIEW_WEEK, engine:false, config:false}
            {view:OGX.Calendar.VIEW_DAY, engine:false, config:false}
       ],
       ...
  },

If for some reasons you want to display 2 months view (using different engine), you can also do

  let config = {
       views:[
            {view:OGX.Calendar.VIEW_MONTH, engine:false, config:false},
            {view:OGX.Calendar.VIEW_MONTH, engine:false, config:false}
       ],
       ...
  },