前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Wijmo 更优美的jQuery UI部件集:活动日历控件(Event Calendar)

Wijmo 更优美的jQuery UI部件集:活动日历控件(Event Calendar)

作者头像
葡萄城控件
发布于 2018-01-10 07:54:48
发布于 2018-01-10 07:54:48
2K00
代码可运行
举报
运行总次数:0
代码可运行

  Wijmo Event Calendar活动日历控件,是一个功能齐全的活动日历控件,允许用户添加,编辑和管理他们的日程。默认情况下,控件将使用Html5的Local Storage特性,进行离线数据存储,用户可以在不连接网路的情况下,使用网页来管理自己的日程,无需额外的配置。

  Wijmo Event Calendar支持用户自定义数据存储方式。Wijmo Event Calendar 控件在设计之初就将数据展现和数据存储进行分离,您可以使用amplify.store库,实现本地数据存储。然后设置:dataStorage,指定自定义的数据存储层,设置visibleCalendars决定那些日历需要显示。

  Wijmo Event Calendar 支持灵活的UI定制,自带的Theme就很像 apple 的Calendar, 您可以显示/隐藏标题栏,导航栏,状态栏,右边的窗口。

  下面是默认UI:

Day View

Week View:

Month View:

List (Agenda) View

Wijmo Calendar http://wijmo.com/widgets/wijmo-complete/events-calendar/

APIhttp://wijmo.com/wiki/index.php/Events_Calendar

Wijmo Calendar 依赖下面的JavaScript库:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
jquery.ui.core.js

jquery.ui.widget.js

globalize.js

jquery.mousewheel.js

jquery.plugin.wijtextselection.js

jquery.wijmo.wijutil.js

jquery.wijmo.wijinputcore.js

jquery.wijmo.wijinputdate.js

jquery.wijmo.wijinputnumber.js

jquery.wijmo.wijcalendar.js

jquery.wijmo.wijdialog.js

jquery.wijmo.wijcombobox.js

jquery.wijmo.wijdatepager.js

需要进行用户自定制数据存储时,需要引入下面这两个库:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
amplify.core.js

amplify.store.js

使用非常简单的代码就可以初始化一个Event Calendar了:

---------

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$(document).ready(function () {

$("#eventscalendar").wijevcal();

});

----------

下载本文示例代码.

Wijmo Event Calendar 还提供了其它强大的API, 使用户可以方便的定制控件:

设置 Culture:

----------

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$("#eventscalendar").wijevcal({ culture: " de-DE");

----------

设置 data source web service:

---------

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$("#report").wijevcal({

webServiceUrl: "http://mysite/c1evcalservice.ashx"

});

--------

设置 星期的第一天:

--------

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$("#eventscalendar").wijevcal({ firstDayOfWeek: 1 });

--------

设置 header Bar 是否显示

-------

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$("#element").wijevcal({ headerBarVisible: false });

-------

设置navigation Bar 是否显示

-------

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$("#element").wijevcal({navigationBarVisible: false });

-------

设置右边 Panel 是否显示

-------

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$("#element").wijevcal({rightPaneVisible: false });

-------

还有很多其它实用的API:

http://wijmo.com/wiki/index.php/Events_Calendar

下载本文示例代码

Wijmo下载,请进入Studio for ASP.NET Wijmo 2012 v1正式发布(2012.03.22更新)!

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2012-05-10 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验