Semantic-UI-Calendar

> 编程语言

Open source

Calendar module for Semantic UI

800 stars0 likes0 views

Website GitHub

About

Calendar module for Semantic UI

No longer maintained. See Fomantic-UI for a more recently updated version of this module.

Semantic-UI-Calendar

Calendar module for Semantic UI. See https://jsbin.com/ruqakehefa/ for example usage.

This was originally a PR for Semantic UI: https://github.com/Semantic-Org/Semantic-UI/pull/3256.

Installation

Install using bower:

bower install --save semantic-ui-calendar

Install using npm:

bash

npm install --save semantic-ui-calendar

Include javascript and css in html:

xml

Compiling CSS from LESS

If you want to theme the calendar, or change some of the variables from the default theme, you can compile the LESS source using your favourite build tool.

Import the calendar.less file into your app.

less

@import 'definitions/modules/calendar';

Ensure that this module's src directory is included when compiling the LESS:

javascript

  lessOptions: {
    paths: [
      'bower_components/semantic-ui-calendar/src',
      ...
    ]
  }

Behavior

These functions can be called the same way you call Semantic UI behavior functions:

javascript

$('#mycalendar').calendar('behavior name', argumentOne, argumentTwo);

Behavior	Description
`refresh`	Refresh the calendar.
`popup(arguments)`	Call the popup module (e.g. passing 'show' will show the calendar popup).
`focus`	Focus the calendar input.
`blur`	Blur the calendar input.
`clear`	Clear the selected date.
`get date`	Get the selected date.
`set date(date, updateInput = true, fireChange = true)`	Set the selected date. Pass `false` to `updateInput` to disable updating the input. Pass `false` to `fireChange` to disable the `onChange` callback for this change.
`get mode`	Get the current selection mode (`year`, `month`, `day`, `hour`, `minute`).
`set mode(mode)`	Set the current selection mode (`year`, `month`, `day`, `hour`, `minute`).
`get startDate`	Get the start date for range selection.
`set startDate(date)`	Set the start date for range selection.
`get endDate`	Get the end date for range selection.
`set endDate(date)`	Set the end date for range selection.
`get focusDate`	Get the currently focused date.
`set focusDate(date)`	Set the currently focused date.