Calendar

- This module is being updated -

OGX.Calendar is locale aware, 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);

By default, OGX.Calendar uses a single layout, MONTH_DAYS, paired with the DATE_DAY_NUMBER engine, which results in a standard calendar displaying days per month. Swiping left or right decrements/increments the month.

Multiple layouts

You can also declare multiple layouts and switch from one another by swiping up/down. Then swiping left/right will increment the date based on the unit and value of the layout. The following configuration displays the days of a months. Swiping down switches the layout to rendering days of the current week.

 let config = {
      container:_SELECTOR_,
      layouts:[
           {layout:'MONTH_DAYS', engine:'DATE_DAY_NUMBER'},
           {layout:'WEEK_DAYS', engine:'DATE_DAY_NUMBER'}
      ]
 };

You can have as many layout/engine pairs as you want.

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 first decade of the 2000's.

Custom Layout

You can also use your own custom layout using

 OGX.CalendarLayout.CUSTOM

Engines

An engine is used to render the content of a layout element. For instance, if you use the MONTH_DAYS layout paired with the DATE_DAY_NUMBER, that engine will render in each and every layout element, the day of the given date.