sm-calendar
Mithril semantic-ui calendar widget
It requires mithril and semantic-ui-table and semantic-ui-grid
It is expected for mithril to be in global (m variable) or it will attempt to load it with require('mithril')
, webpack its recommended
Demo
(function (m, Calendar) { var module = {}; module.controller = function () { module.vm.init(); }; module.vm = {}; module.vm.init = function (data) { this.customers = data; this.rowsperpage = 10; this.filter = m.prop(''); this.calendar = new Calendar({ mindate: new Date(new Date().getTime() + 10*24*60*60*1000), maxdate: new Date(new Date().getTime() + 30*24*60*60*1000 + 10000000) }); this.calendar2 = new Calendar({small: true}); }; module.view = function (/*ctrl*/) { return m('', [ m('.ui.grid.page', [ m('br'), m('h1.ui.dividing.header', 'Calendar Widget') ]), m('.ui.grid.page', [ m('h2', 'Basic Calendar'), module.vm.calendar.view(), m('button.ui..button.primary', { onclick: function() { console.log(module.vm.calendar.getDate()); } }, 'get') ]), m('.ui.grid.page.stackable', [ m('h2', 'Small Calendar'), m('.row', [ m('.ui.column.five.wide', [ m('.ui.grid', [ module.vm.calendar2.view() ]) ]) ]), m('button.ui.button.primary', { onclick: function() { console.log(module.vm.calendar2.getDate()); } }, 'get') ]) ]); }; m.module(window.document.body, module);}(m, Calendar));
Attributes
It accepts the following properties, all of them are optional
- mindate, min date that can be selected
- maxdate, max date that can be selected
- small, boolean, if you want to show a small calendar
- value, date, current selected date
- formatCell, function to format the cell, recieves a date object,
- time, boolean, to display the time
- onclick, function to react when the cell its clicked, doesnt work if formatcell its passed too
- i18n, object map with:
- monthsLong, array of string months in a long format
January, February
... - months, array of string months in a small format
Jan, Feb
... - daysLong, array of string days in a long format
Monday, Tuesday
... - days, array of string days in a small format
Mon, Tue
...
- monthsLong, array of string months in a long format
Functions
Creating a calendar
var calendar = new Calendar({ mindate: new Calendar();});
Loading the view calendar
m('div', calendar.view())
You can jump to a date with
calendar.goToDate(date); //date must be a Date object
You can get the seleted date
calendar.getDate(); //returns Date object
You can set the maxdate and mindate
calendar.setMaxDate(date);calendar.setMinDate(date);