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

  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/

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

 

Wijmo Calendar 依赖下面的JavaScript库:

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

 

 

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

amplify.core.js

amplify.store.js

 

 

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

---------

$(document).ready(function () {

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

});

 

----------

下载本文示例代码.

 

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

设置 Culture:

----------

$("#eventscalendar").wijevcal({ culture: " de-DE");

 

----------

设置 data source web service:

---------

$("#report").wijevcal({

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

});

 

--------

设置 星期的第一天:

--------

$("#eventscalendar").wijevcal({ firstDayOfWeek: 1 });

 

--------

设置 header Bar 是否显示

-------

$("#element").wijevcal({ headerBarVisible: false });

 

-------

设置navigation Bar 是否显示

-------

$("#element").wijevcal({navigationBarVisible: false });

 

-------

设置右边 Panel 是否显示

-------

$("#element").wijevcal({rightPaneVisible: false });

 

-------

还有很多其它实用的API:

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

 

下载本文示例代码

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

时间: 2024-10-13 16:49:46

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

Wijmo 更优美的jQuery UI部件集:通过jsFiddle测试Wijmo Gauges

Wijmo 的巨大优势之一就是,它们是非常流行的jQuery UI部件.这将意味着它们的基础类库具有很多支持者.具有众多的支持者同时也意味着更多好用的工具.这些好用的工具之一就是很酷的jsFiddle,这是一个实时的HTML/CSS/JavaScript snippet编辑器.用它来以一种迅速的无开销的方式测试一些小东西是相当棒的.事实上,我们可以用它来实时的测试一些wijmo部件,这里我们会看到如何做到这一点.因为Wijmo gauges使用到了基于浏览器能力的SVG或者VML,这些是"无插件

Wijmo 更优美的jQuery UI部件集:发现 Wijmo

内容  1 什么是Wijmo?  2 jQuery 语法  3 jQuery 选择器      3.1 jQuery 元素选择器      3.2 jQuery 属性选择器      3.3 jQuery CSS 选择器  4 文件准备功能  5 jQuery 选项  6 如何引用Wijmo  7 创建你的第一个jQuery 工程   什么是 Wijmo? Wijmo 是一个基于jQuery UI的UI部件的套件.Wijmo 部件对客户端Web开发进行了优化,并且充分利用了jQuery的强大能力

Wijmo 更优美的jQuery UI部件集:爱上 ThemeRoller

Wijmo 是一个基于jQuery UI的UI部件的套件.Wijmo最方便使用的特点之一就是兼容ThemeRoller.ThemeRoller 是一个创建独特的jQuery UI web 部件主题皮肤的web应用程序.凭借其简单的界面和所见即所得的预览功能,你可以用比使用图形编辑器更短的时间为你的Wijmo部件以及其他兼容ThemeRoller的部件创建皮肤.   拉开帷幕:ThemeRoller 基础 我们可以在这里找到ThemeRoller Web 应用程序 jqueryui.com/the

Wijmo 更优美的jQuery UI部件集:复合图表(CompositeChart)

Wijmo的CompositeChart控件允许您使用一个Chart来分析和展现复杂的数据.相同的数据可以使用不同的可视化效果,不同的图表类型展现在一个图表内,使得用户可以从不同的角度,了解分析这组数据所表达的内容 . 本文将介绍如何使用Wijmo的CompositeChart控件,制作一个复合图表.CompositeChart 的API:http://wijmo.com/wiki/index.php/Compositechart,Wijmo 的CompositeChart 化繁为简,将传统 E

Wijmo 更优美的jQuery UI部件集:在安全站点使用Wijmo控件

通常我们总会遇到这样的问题,在安全站点(HTTPS)中使用C1Wijmo控件时,用户可能会收到脚本错误. 发生这种状况的是由于我们的CDN链接不是https链接.   解决HTTPS 的错误 为了解决上述脚本问题,你需要使用本地的脚本文件,而不是使用网上CDN的链接.你可以使用以下解决方案之一: 解决方案1. 在设计视图下,取消选中C1Wijmo控件的SmartTag上的 "UseCDN"选项. 解决方案2. 你可以在网站配置文件中,明确地将该选项设置为false: <appSe

Wijmo 更优美的jQuery UI部件集:导出Wijmo的GridView到Excel

Wijmo GridView 控件不提供导出Excel文件的方法.本篇博客介绍一种将Wijmo的GridView控件保存到Excel的简单方法.你可以使用同样的方法在C1 WebUI GridView上.   步骤1 : 将C1GridView绑定至数据源 第一步是将C1GridView绑定到数据源.为了简单起见,我们将其绑定到C1Nwind.mdb的Customers表.   步骤2 : 导出C1GridView 至Excel 导出到Excel需要分成两步.第一步是将GridView保存至一个

Wijmo 更优美的jQuery UI部件集:自定义 C1WijMenu

C1Wijmo 全部的控件是完全可定制的,并且可以根据你自己的需求定制他们的界面外观. 我准备使用C1Menu演示这一点. 让我们从向控件应用自定义主题开始.   改变主题 1) 创建一个网站,然后拖放一个C1Menu到web页面上. 2) 单击智能标记,并打开任务菜单. 3) 在主题属性中输入CDN的URL以指定主题. 例如,在我们的这个例子中,我们应用ui-darkness 主题 http://jquery-ui.googlecode.com/svn/tags/1.8.14/themes/u

Wijmo 更优美的jQuery UI部件集:服务器端Grid魔法

在之前的一篇文章中,我们讨论了如何添加一大堆的超赞的功能到一个标准的HTML表,并把它转换成一个"grid"表格.今天我想要做的事情是向你展示如何将这些功能转到服务器. 通过使用服务器做大量的"苦力活儿",我们可以向我们的最终用户提供更加平顺的用户体验.什么苦力活要交给服务器呢?假设你有一百万行的数据集,这些数据要是发送到客户端,然后再进行排序/分页/过滤,那会是相当可观的一堆流量.但是如果我们要求服务器在发送数据到客户端之前执行排序/分页/过滤,我们可以迅速的减少

Wijmo 更优美的jQuery UI部件集:C1 Wijmo Grids 更多惊喜

本文中,我将给大家介绍一系列非常棒的 Wijmo Grids功能.我们先以一个新的Wijmo Grids 来开始我们这次的 Wijmo Grids 之旅吧.     <BR> <table id="tableDepartmentInformation"><BR> <thead><BR> <tr><BR> <th>First Name<BR> </th><BR&g