Calendar

- This module is being updated -

OGX.Calendar is an infinite multi function, multi layout calendar, that can render time periods, such as (and not limited to) centuries, decades, years, months, weeks, days (...) and custom data within each period.

Time periods can also be customized, if, for instance, you need to render 2 weeks at a time, or any time period that suits your needs.

OGX.Calendar uses OGX.GridSwiper and OGX.List so they must be added to your project as well if you are using independent files instead of the framework file.

Instantiate

 let config = {
      container:_SELECTOR_ //Required, The selector for the target HTML element         
 };

 let calendar = new OGX.Calendar(config);

Layouts

Out of the box, OGX.Calendar comes with a bunch of predefined layouts.

 OGX.CalendarLayout.CENTURY_DECADES  //Displays decades per century
 OGX.CalendarLayout.CENTURY_YEARS    //Displays years per century
 OGX.CalendarLayout.DECADE_YEARS     //Displays years per decade
 OGX.CalendarLayout.DECADE_MONTHS    //Displays months per decade
 OGX.CalendarLayout.YEAR_MONTHS      //Displays months per year
 OGX.CalendarLayout.YEAR_WEEKS       //Displays weeks per year
 OGX.CalendarLayout.YEAR_DAYS        //Displays days per year
 OGX.CalendarLayout.MONTH_WEEKS      //Displays weeks per month
 OGX.CalendarLayout.MONTH_DAYS       //Displays days per month
 OGX.CalendarLayout.DAY_HOURS        //Displays hours per day

For instance, the OGX.CalendarLayout.CENTURY_DECADES layout will display 10 zones, each representing a decade. Then on a right swipe, the century will be increased by 1. In other words, if you start with 1900, the layout will be composed of 10 zones, each representing 10 years and a swipe right would display the decades for 2000's.

Custom Layout

You can also use your own custom layout using

 OGX.CalendarLayout.CUSTOM

Engines