Calendar

OGX.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}
       ],
       ...
  },

Schedule & DataHelper

If you are going to use the calendar with rendering engines with your own custom time based data set, and won't use the internal scheduling element, you can skip this paragraph.

OGX.Calendar comes with a data manipulation helper object to facilitate the edition of a calendar with unique and recurring events. It produces a small JSON configuration object that can be reused.

Engines

A calendar engine is what is used to render what is inside the box. You can see it this way, the simplest engine is the engine that any calendar uses, which renders the date (number) inside a box. Now if you wish to render other information about the day, such as a schedule, a graph, the result of a calculus, whatever, you can use or create your own rendering engine.