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 to render 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 create custom layouts respecting a few rules. A layout needs a few public methods so the calendar knows what to do when a user swipes left/right.

 OGX.CalendarLayout.MY_CUSTOM_LAYOUT = function(){
      'use strict';
       OGX.CalendarLayout.BASE_LAYOUT.call(this);

      //Optional, a labels method that returns an HTML string to render as top labels
      this.labels = function(){
           return '';
      };

      //Optional, a html method that returns the layout an HTML string, defaults to empty string
      this.html = function(__date, __engine, __options){
           return '';
      };

      //Optional, a value method that return an object containing the increment value, default to the following
      this.value = function(){                
            return {value:1, unit:'months'};
      };
    
      //Optional, a format used to display the current date with this layout, defaults to YYYY-MM
      this.format = function(){
            return 'YYYY-MM';
      };

 };

Available units are

 years
 months
 days
 hours
 minutes
 seconds
 milliseconds

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.

Out of the box, only DATE_DAY_NUMBER is available but you can easily create an engine for your calendar needs. For instance, if you wish to render custom data based on the date of each and every element, simply create a custom engine as follow

 OGX.CalendarEngine.MyCustomEngine = function(__date){

       //do some calculation here based on the date
       var myresult = 'some html content based on the date';
       return '<span class="someCSS">'+myresult +'</span>';

 };

This way, you can render any type of content inside your layout elements, such as graphs, stats, images, whatever you need.