前往小程序,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/

API:http://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 删除。

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Wijmo 更优美的jQuery UI部件集:在安全站点使用Wijmo控件
通常我们总会遇到这样的问题,在安全站点(HTTPS)中使用C1Wijmo控件时,用户可能会收到脚本错误。 发生这种状况的是由于我们的CDN链接不是https链接。 解决HTTPS 的错误 为了解决上述
葡萄城控件
2018/01/10
7810
Wijmo 更优美的jQuery UI部件集:在安全站点使用Wijmo控件
Wijmo 更优美的jQuery UI部件集:复合图表(CompositeChart)
Wijmo的CompositeChart控件允许您使用一个Chart来分析和展现复杂的数据。相同的数据可以使用不同的可视化效果,不同的图表类型展现在一个图表内,使得用户可以从不同的角度,了解分析这组数
葡萄城控件
2018/01/10
1.3K0
Wijmo 更优美的jQuery UI部件集:复合图表(CompositeChart)
Wijmo 更优美的jQuery UI部件集:发现 Wijmo
什么是 Wijmo? Wijmo 是一个基于jQuery UI的UI部件的套件。Wijmo 部件对客户端Web开发进行了优化,并且充分利用了jQuery的强大能力以达到出色的性能和易用性。所有的Wij
葡萄城控件
2018/01/10
2.8K0
Wijmo 更优美的jQuery UI部件集:发现 Wijmo
用这个,自定义日历控件各种效果都不是问题
最近遇到要做一个日历控件,给的效果图是这样的: 日历 其实我在想,我下次如果又要写一个,只是其中的图标改掉了,那我不得又得写一遍??不存在的,tan90。
Xiaolei123
2018/06/28
1.6K0
Wijmo 更优美的jQuery UI部件集:通过jsFiddle测试Wijmo Gauges
Wijmo 的巨大优势之一就是,它们是非常流行的jQuery UI部件。这将意味着它们的基础类库具有很多支持者。具有众多的支持者同时也意味着更多好用的工具。这些好用的工具之一就是很酷的jsFiddle,这是一个实时的HTML/CSS/JavaScript snippet编辑器。用它来以一种迅速的无开销的方式测试一些小东西是相当棒的。事实上,我们可以用它来实时的测试一些wijmo部件,这里我们会看到如何做到这一点。因为Wijmo gauges使用到了基于浏览器能力的SVG或者VML,这些是“无插件网页”的一个
葡萄城控件
2018/01/10
1.1K0
Wijmo 更优美的jQuery UI部件集:通过jsFiddle测试Wijmo Gauges
Wijmo 更优美的jQuery UI部件集:从wijwizard和wijpager开始
本文演示了如何使用Wijmo的其中两个部件,wijwizard 以及 wijpager。如果你期望看到Wijmo的其他文章,请参阅Wijmo 更优美的jQuery UI部件集:发现 Wijmo。 在这个快速入门,你将学习如何向一个HTML工程添加众多Wijmo部件中的两个,wijwizard 以及 wijpager。你将从添加并且自定义一个wijwizard部件入手,可以了解到一些独特的功能,然后你将学习如何通过连接到wijpager部件对wijwizard添加分页导航支持。 第一步是创建一个HTML页面,
葡萄城控件
2018/01/10
2.7K0
Wijmo 更优美的jQuery UI部件集:从wijwizard和wijpager开始
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/ui-darkne
葡萄城控件
2018/01/10
1.1K0
Wijmo 更优美的jQuery UI部件集:自定义 C1WijMenu
FullCalendar 日历插件中文说明文档
FullCalendar提供了丰富的属性设置和方法调用,开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发,本文将FullCalendar的常用属性和方法、回调函数等整理成中文文档,以供参阅 普通显示设置 属性 描述 默认值 header 设置日历头部信息。 如果设置为false,则不显示头部信息。包括left,center,right左中右三个位置,每个位置都可以对应以下不同的配置: title: 显示当前月份/周/日信息 prev: 用于切换到上一月/周/日视图的按钮
用户1149182
2018/01/12
33.4K1
Wijmo 更优美的jQuery UI部件集:导出Wijmo的GridView到Excel
Wijmo GridView 控件不提供导出Excel文件的方法。本篇博客介绍一种将Wijmo的GridView控件保存到Excel的简单方法。你可以使用同样的方法在C1 WebUI GridView
葡萄城控件
2018/01/10
9660
Wijmo 更优美的jQuery UI部件集:导出Wijmo的GridView到Excel
jquery日历控件 假日
在Web开发中,日历控件是一个常见的组件,用于显示日期并帮助用户选择日期。jQuery日历控件是一款流行的JavaScript库,可以轻松地实现日历功能。在很多应用场景中,我们需要在日历上标识出假日,以提醒用户。本文将介绍如何结合jQuery日历控件和假日数据,实现假日在日历上的显示。
大盘鸡拌面
2024/04/29
4060
9 款样式华丽的 jQuery 日期选择和日历控件
现在的网页应用越来越丰富,我们在网页中填写日期和时间已经再也不用手动输入了,而是使用各种各样的日期时间选择控件,大部分样式华丽的日期选择和日历控件都是基于jQuery和HTML5的,比如今天要分享的这9款日期选择控件,漂亮的UI外观加上人性化的操作设计,大大提高了用户体验,让我们一起来欣赏一下吧。
哲洛不闹
2018/09/18
24.2K0
9 款样式华丽的 jQuery 日期选择和日历控件
Wijmo 更优美的jQuery UI部件集:爱上 ThemeRoller
Wijmo 是一个基于jQuery UI的UI部件的套件。Wijmo最方便使用的特点之一就是兼容ThemeRoller。ThemeRoller 是一个创建独特的jQuery UI web 部件主题皮肤的web应用程序。凭借其简单的界面和所见即所得的预览功能,你可以用比使用图形编辑器更短的时间为你的Wijmo部件以及其他兼容ThemeRoller的部件创建皮肤。 拉开帷幕:ThemeRoller 基础 我们可以在这里找到ThemeRoller Web 应用程序 jqueryui.com/themeroller
葡萄城控件
2018/01/10
1.2K0
Wijmo 更优美的jQuery UI部件集:爱上 ThemeRoller
fullcalendar日历插件的使用并实现增删改查
我上个项目是做了一个关于教育方面的web端页面,其中的课程表就要用到fullcalendar日历插件,刚开始也是不会用,因为以前也没用过,后面也是看官方文档,问同事,最后完成了这个课程表,个人感觉fullcalendar这个日历插件功能很强大!下面我来附上几张图片:
故久
2019/09/29
5.7K0
fullcalendar日历插件的使用并实现增删改查
Wijmo 更优美的jQuery UI部件集:在对Wijmo GridView进行排序或者过滤时保留选择
许多客户面临这样的场景,他们希望在应用了排序或者过滤之后仍然将最终用户的行选状态保留。通常情况下,当我们在选择了任何行之后应用排序或者过滤会导致回传之后选择状态丢失。本篇博客将讨论我们如何做才能在排序
葡萄城控件
2018/01/10
1K0
Wijmo 更优美的jQuery UI部件集:在对Wijmo GridView进行排序或者过滤时保留选择
FullCalendar日历插件
FullCalendar是一个jQuery日历插件,它使用Ajax来获取每一个月的日历事件并能够配置成使用自己的日历事件来源比如从GoogleCalendar获取事件。支持拖放日历中的事件,自定义点击和拖放事件。在很多项目中都会用到这个控件。
一觉睡到小时候
2019/07/02
5.4K0
FullCalendar日历插件
【愚公系列】2023年09月 WPF控件专题 Calendar控件详解
WPF控件是Windows Presentation Foundation(WPF)中的基本用户界面元素。它们是可视化对象,可以用来创建各种用户界面。WPF控件可以分为两类:原生控件和自定义控件。
愚公搬代码
2023/09/28
7260
Mobile first! Wijmo 5 + Ionic Framework之:费用跟踪 App
费用跟踪应用采用了Wijmo5和Ionic Framework创建,目的是构建一个hybird app。 我们基于《Mobile first! Wijmo 5 + Ionic Framework之:Hello World!》的环境,将在本教程中完成费用跟踪App的构建。下面的代码结构是本教程完成要达到的效果,请预先创建好文件和目录。 www/ --> 工程根目录 index.html --> app 布局文件 (主HTML文件) css/
葡萄城控件
2018/01/10
2.4K0
Mobile first! Wijmo 5 + Ionic Framework之:费用跟踪 App
利用jquery ui的datepicker开发一个课程日历
    这两天在开发某商学院的网站,里面有涉及到课程的模块,客户希望在网站的首页显示一个日历,在有课程的日期加上显眼的标识,使网站用户一眼看到日历后就能知道哪天商学院有课程以便他们安排时间报名修读。
风柏杨4711
2021/03/15
2.2K0
为全志D1开发板移植LVGL日历控件和显示天气
Linux还真是逐步熟悉中,现在才了解到Linux即没有原生的GUI,也没有应用层协议栈,所以要实现HTTP应用,必须利用TCP然后自己封装HTTP数据包。本篇即记录封装HTTP数据包,到心知天气请求天气信息的案例实现过程。
阿志小管家
2024/02/22
3110
为全志D1开发板移植LVGL日历控件和显示天气
魔改react-calendar还原UI设计中的打卡日历效果
我们需要还原UI给我们的设计图里面的日历样式, 找到了一款第三方日历库,我们如何进行魔改呢?
心安事随
2024/07/29
3590
魔改react-calendar还原UI设计中的打卡日历效果
推荐阅读
相关推荐
Wijmo 更优美的jQuery UI部件集:在安全站点使用Wijmo控件
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验