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:
npm install --save semantic-ui-calendar
Include javascript and css in html:
<script type="text/javascript" src="/bower_components/semantic-ui-calendar/dist/calendar.min.js"></script>
<link rel="stylesheet" href="/bower_components/semantic-ui-calendar/dist/calendar.min.css" />
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.
@import 'definitions/modules/calendar';
Ensure that this module's src
directory is included when compiling the LESS:
lessOptions: {
paths: [
'bower_components/semantic-ui-calendar/src',
...
]
}
Behavior
These functions can be called the same way you call Semantic UI behavior functions:
$('#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. |
Settings
The following settings are supported by this module:
type: 'datetime',
firstDayOfWeek: 0,
constantHeight: true,
today: false,
closable: true,
monthFirst: true,
touchReadonly: true,
inline: false,
on: null,
initialDate: null,
startMode: false,
minDate: null,
maxDate: null,
ampm: true,
disableYear: false,
disableMonth: false,
disableMinute: false,
formatInput: true,
startCalendar: null,
endCalendar: null,
multiMonth: 1,
popupOptions: {
position: 'bottom left',
lastResort: 'bottom left',
prefer: 'opposite',
hideOnScroll: false
},
text: {
days: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
today: 'Today',
now: 'Now',
am: 'AM',
pm: 'PM'
},
formatter: {
header: function (date, mode, settings) {
},
yearHeader: function (date, settings) {
},
monthHeader: function (date, settings) {
},
dayHeader: function (date, settings) {
},
hourHeader: function (date, settings) {
},
minuteHeader: function (date, settings) {
},
dayColumnHeader: function (day, settings) {
},
datetime: function (date, settings) {
},
date: function (date, settings) {
},
time: function (date, settings, forCalendar) {
},
today: function (settings) {
return settings.type === 'date' ? settings.text.today : settings.text.now;
},
cell: function (cell, date, cellOptions) {
}
},
parser: {
date: function (text, settings) {
}
},
onChange: function (date, text, mode) {
},
onShow: function () {
},
onVisible: function () {
},
onHide: function () {
},
onHidden: function () {
},
isDisabled: function (date, mode) {
return false;
},
selector: {
popup: '.ui.popup',
input: 'input',
activator: 'input'
},
regExp: {
dateWords: /[^A-Za-z\u00C0-\u024F]+/g,
dateNumbers: /[^\d:]+/g
},
error: {
popup: 'UI Popup, a required component is not included in this page',
method: 'The method you called is not defined.'
},
className: {
calendar: 'calendar',
active: 'active',
popup: 'ui popup',
grid: 'ui equal width grid',
column: 'column',
table: 'ui celled center aligned unstackable table',
prev: 'prev link',
next: 'next link',
prevIcon: 'chevron left icon',
nextIcon: 'chevron right icon',
link: 'link',
cell: 'link',
disabledCell: 'disabled',
adjacentCell: 'adjacent',
activeCell: 'active',
rangeCell: 'range',
focusCell: 'focus',
todayCell: 'today',
today: 'today link'
},
metadata: {
date: 'date',
focusDate: 'focusDate',
startDate: 'startDate',
endDate: 'endDate',
mode: 'mode',
monthOffset: 'monthOffset'
}