@smartface/component-calendar
TypeScript icon, indicating that this package has built-in type declarations

5.0.5 • Public • Published

Smartface Calendar Component

Npm Status

Component Architecture

Component Architecture

Component Installation

Run this on a terminal pathed to the root directory of project

(cd scripts && npm i @smartface/component-calendar)

Component Usage

import { Calendar } from '@smartface/component-calendar';
import specialDaysConf from './specialDays.json';

const myCalendar = new Calendar();

// Please use after Page:onShow is triggered.
myCalendar.changeCalendar("en", "gregorian", specialDaysConf)
// when user select a date
myCalendar.onDaySelect = (dateInfo) => {

}

// changing calendar date
myCalendar.setSelectedDate({month:2, year:2017, day:12});

Using Custom Theme

// It must be based on theme.json below
const customTheme = {

};

import { Calendar } from "@smartface/component-calendar";
import specialDaysConf from './specialDays.json';

const myCalendar = new Calendar({theme: customTheme});

// or

const myCalendar = new Calendar();
// Add and merge new styles
myCalendar.addStyles(customTheme);

specialDays

Sample special-days

Changing specialDays at runtime

import { Calendar } from "@smartface/component-calendar";
import specialDaysConf from './specialDays.json';

const myCalendar = new Calendar();
myCalendar.changeCalendar("en", "gregorian", specialDaysConf)


// Changes special days' data anywhere
myCalendar.setSpecialDays(newSpecialDays)

Component Configuration

{
  // Provides to use range-selection. Default: true
  useRangeSelection=true,
  // Provides to use custom theme file. Default: null
  theme=null,
  // Provides to display only days of the current month. Default: false
  justCurrentDays=false,
  // Provides to manage calendar state using an external CalendarCore component. Default is null to use internal component.
  calendarCore=null,
  // Provides to manage styles using external calendar-context component. Default is null to use internal component.
  context=null,
  // Provides to use or not single day selection. Default: true
  useDaySelection=true
}

Usages

import { Calendar } from "@smartface/component-calendar";
import specialDaysConf from './specialDays.json';
import customTheme from './customTheme.json';

export default class Page1 extends Page1Design {
    router: any;
	constructor () {
        super();
		// Overrides super.onShow method
        this.onShow = onShow.bind(this, this.onShow.bind(this));
		// Overrides super.onLoad method
		this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
        const container = new FlexLayout();
        container.flexGrow = 1;
        this.addChild(container);
        const calendar = new Calendar();
        calendar.addStyles(customTheme);
        container.addChild(calendar);
        calendar.changeCalendar("tr", "gregorian", days);
    }
}

function onShow(superOnShow) {
    const page = this;
    superOnShow();
    
    // changing calendar date
    this.calendar.setSelectedDate({month:2, year:2017, day:12});

    if (System.OS === "Android") {
        setTimeout(() => page.btnNext.enabled = true, 300);
    }
}

// To create with custom context. It's only for advanced use.
import createContext from "@smartface/component-calendar/components/calendarContext";



const myCalendar = new Calendar({
  useRangeSelection: true,
  useContext: false,
  justCurrentDays: true,
  useDaySelection: false
});

const newContext = calendarContext(myCalendar, "mycalendar", customTheme);

// and add/merge new styles
const newStyle = {

};
newContext(newStyles)

Component Elements

The Calendar component is consisted of several elements. Elements are :

  • calendar
    • className: .calendar-self
      • navbar
        • className: .calendar.header_navbar
          • prevMonth:
            • styling id: #calendar_navbar_prevMonth
            • className: .calendar.header_navbar_arrow
          • nextMonth:
            • styling id: #calendar_navbar_nextMonth
            • className: .calendar.header_navbar_arrow
          • monthLabel:
            • styling id: #calendar_navbar_monthLabel
            • className: .calendar.header_navbar_monthLabel
      • calendarDays:
        • styling id: #calendar_calendarDays
        • className: .calendar.header_dayNames
          • dayName_0, dayName_1, dayName_2, dayName_3, dayName_4, dayName_5, dayName_6
            • className: .calendar.header_dayNames_dayName
            • styling id: #calendar_calendarDays_{component name}
      • calendarBody
        • styling id: #calendar_calendarBody
        • className: .calendar.body
          • week1, week2, week3, week4, week5, week6, week7
            • className: .calendar.weekrow
              • line
                • styling id: #calendar_week(1..4)_line
              • weekDay1, weekDay2, weekDay3, weekDay4, weekDay5, weekDay6, weekDay7
                • styling id: #calendar_week(1..4)_weekday(1..7)
                • className: .calendar.day
                • dayNum
                  • className: .calendar.day_label
                  • styling id: #calendar_week(1..4)_weekday(1..7)_dayNum

Styling

Default Theme

Changing Styles

You can override new styles like below

const newMonthLabelColorStyle = {
  ".calendar":{
    ".header":{
      "&_navbar":{
        "&_monthLabel":{
          "textColor":"#F10000"
        }
      }
    }
  }
};
      
import Calendar from "@smartface/calendar-component/components/Calendar";
const calendar = new Calendar();

// changes calendar month label color to red
calendar.addStyles(newMonthLabelColorStyle);

Supported Languages and Calendars

Calendar.changeCalendar(lang:String: string="en", type:String:"gregorian"| "hijri", specialDays:Object={})

Changes the calendar's type

Supported Calendars:

  • CalendarTypes.HIJRI
  • CalendarTypes.GREGORIAN

Supported Languages:

  • Turkish : "tr"
  • German : "de"
  • French : "fr"
  • Arabic: "ar"
  • Arabic (Saudi): "ar-sa"
  • Dutch : "nl" and all languages that are supported by moment.js

Events and Hooks

onChange(date:DateInfo) Event

Called when user presses on a day on the calendar. Calendar injects to callback a selected date object is described above.

onBeforeMonthChange(date:DateObject)

Triggered before the Calendar month is changed. And if the hook returns false then it makes the month changing to be canceled.

var calendar = new Calendar();
calendar.onBeforeMonthChange = (date) => {
  if (date.month < 6)
    return false;
  return true;
}

onMonthChange(date:DateVO)

Triggered when month is changed by the user.

onDaySelect(date:DateInfo[])

Triggered when a day or days range is selected by the user.

onRangeSelectionStart(date:DateInfo)

Triggered when a day is selected by the user.

onRangeSelectionComplete(start:DateInfo, end:DateInfo)

Triggered when a day is selected by the user.

Headless Calendar

To use calendar logic viewless, please check out : CalendarCore

Usage

import { CalendarCore } from "@smartface/component-calendar";

const headlessCalendar = new CalendarCore();
headlessCalendar.changeCalendar("tr");
headlessCalendar.subscribe((oldState, newState) => {
    
});
headlessCalendar.nextMonth();

Examples

Calendar usage example

Component maintainers (for Smartface Developers)

Create new cloud workspace in the Smartface-Cloud with this repository url. Open Cloud IDE and switch to terminal in the scripts folder. Install dependencies via terminal:

    $ cd scripts
    $ npm install

Then run command via terminal on the workspace root for TDD

  $ yarn run test:watch

and run command to build service layer

$ yarn run dev

Increment the version like:

$ yarn version --patch

Finally run commnand on the scripts folder to publish to npm:

$ yarn publish

or

Github actions will automatically publish the version for you, after merge.

Package Sidebar

Install

npm i @smartface/component-calendar

Weekly Downloads

0

Version

5.0.5

License

MIT

Unpacked Size

397 kB

Total Files

148

Last publish

Collaborators

  • sbasbug
  • alnyli07
  • smf
  • furkan.arabaci