日历 MDB Pro component

日历-Bootstrap 5和Material Design 2.0插件

MDB日历是一个插件,可让您有效地管理任务。多亏了这个扩展 您将能够轻松创建新事件,管理当前事件,移动现有事件 在其他日子之间,并将所有数据存储在易于读取的数组中。

注意:阅读 API 标签以找到所有可用选项,然后 高级定制


基本例子

一些预定义的事件使您可以查看插件的外观。


活动格式

日历事件可以按时间以两种不同的格式添加-12h或24h。您也可以选择 也可以使用 moment 静态getter来返回当前日期对象。 我们建议您阅读 时刻 使用此方法之前的库文档。


星期一优先

data-mdb-monday-first 属性设置为true,以使星期一为第一天 一周中的。


默认视图

data-mdb-default-view 属性设置为 week list 更改开始视图。默认情况下,它是 month


十二小时

通过将 data-mdb-twelve-hour 属性设置为true,您可以获得12小时 时间表。


自定义字幕

您可以使用数据属性非常轻松地自定义所有字幕。详细的选项是 在“ API”标签中进行了介绍。


预设日期

您可以使用 data-mdb-default-date 属性。


只读

使用可以轻松禁用可编辑模式 data-mdb-readonly 属性。

日历 - API


用法

通过数据属性


        <div class="calendar" data-mdb-monday-first="true"></div>     
      

通过JavaScript


        const calendarElement = document.getElementById('calendar');
        const instance = Calendar.getInstance(calendarElement, {
          mondayFirst: true
        });
        instance.next();
      

通过jQuery

注意:默认情况下,MDB 包含jQuery,并且您拥有 自行添加到项目中。


        $('#calendar').calendar('next');   
      

选件

可以通过数据属性,JavaScript或jQuery传递选项。对于数据属性附加 选项名称为 data-mdb-,如 data-mdb-monday-first =“ true”

Name Type Default Description
weekdays Array / String ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] Defines weekdays displayed names.
months Array / String ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] Defines months displayed names.
monthsShort Array / String ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] Defines shortened months displayed names.
mondayFirst Boolean false Changes first day of week to monday.
defaultView String 'month' Defines default view.
twelveHour Boolean false Changes time mode from 24h to 12h.
defaultDate Object / String moment().format('DD/MM/YYYY') Defines the default starting date.
readonly Boolean false Disables event's edition.
todayCaption String 'today' Defines caption for today.
monthCaption String 'month' Defines caption for month button.
weekCaption String 'week' Defines caption for week button.
listCaption String 'list' Defines caption for list button.
allDayCaption String 'All day event' Defines caption for all day event checkbox.
noEventsCaption String No events Defines caption for empty list view.
summaryCaption String Summary Defines caption for summary input label.
descriptionCaption String Description Defines caption for description input label.
startCaption String Start Defines caption for start input label.
endCaption String End Defines caption for end input label.
addCaption String Add Defines caption for add event button.
deleteCaption String Remove Defines caption for remove event button.
editCaption String Edit Defines caption for edit event button.
closeCaption String Close Defines caption for close button.
addEventModalCaption String Add an event Defines caption for add event modal title.
editEventModalCaption String Edit an event Defines caption for edit event modal title.
events Array of Objects [] Defines calendar events.

方法

Name Parameters Description Example
init Initializes the calendar. instance.init()
prev Changes the period of time to previous. instance.prev()
next Changes the period of time to next. instance.next()
today Changes the period of time to today. instance.today()
changeView view Changes the view. instance.changeView('week')
refresh Refreshes the calendar. instance.refresh()
addEvents events Adds new events to the calendar. instance.addEvents([...])
removeEvents Removes all events from the calendar. instance.removeEvents()
dispose Disposes a calendar instance. instance.dispose()
moment Static method which returns a current moment. Calendar.moment
getInstance Static method which allows you to get the calendar instance associated with a DOM element. calendar.getInstance(calendarElement)

        const calendarElement = document.getElementById('calendar');
        const instance = Calendar.getInstance(calendarElement);
        instance.next();
      

大事记

Name Description
prev.calendar Emitted when the prev method triggers.
next.calendar Emitted when the next method triggers.
today.calendar Emitted when the today method triggers.
viewChange.calendar Emitted when the changeView method triggers.
update.calendar Emitted when the refresh method triggers.
addEvent.calendar Emitted when a new event is added. Returns a new event object.
editEvent.calendar Emitted when any event is editted. Returns an editted event object.
deleteEvent.calendar Emitted when any event is deleted. Returns a deleted event object.

          window.addEventListener('next.calendar', () => alert('Time period changed'));
        

进口

MDB UI KIT 也可与模块捆绑器一起使用。使用以下代码导入 此组件:


        import { Calendar } from 'mdb-calendar';