easyui控件实例之Calendar日历

合集下载

轻量级的原生js日历插件calendar.js使用指南

轻量级的原生js日历插件calendar.js使用指南
轻量级的原生js日历插件calendar.js使用指南
许多学习软件的专业人士，都要学编程，而最便捷的一种编程语言就是Java。

本文是轻量级的原生js日历插件calendar.js使用的介绍，下面是该介绍的详细信息。

网页上的原生js日历代码，鼠标点击文字提示处，会显示一个带年月日的日历窗口，可调整年份、月份、选择日期等，用在网页上方便大家选择日期，提高用户体验。

各大浏览器都能正常运行，有需要的小伙伴可以参考下。

使用说明：
需要引入插件calendar.js/calendar.min.js
须要引入calendar.css 样式表，可以自定义自己想要的皮肤
本日历插件支持cmd模块化
如下调用：
复制代码代码如下:
xvDate({。

关于Calendar和Reminder(日历和提醒)编程指南

关于Calendar和Reminder（日历和提醒）编程指南Event Kit框架使你能访问用户的Calendar.app和Reminders.app 信息。

虽然这是两个不同的app，但是他们使用相同的框架处理数据。

类似地，存储这些数据的数据库，被称为日历数据库，持有calendar和reminder信息。

Event Kit除了允许你检索用户已经存在的calendar和reminder数据外，还允许你创建新的事件和提醒。

另外，还允许你修改和删除事件和提醒。

更高级的任务，例如添加警报或指定重复发生的事件，也可以。

一、Reading and Writing Calendar Events:使用EKEventStore类来获取、创建、修改和删除事件，使用EKEvent类来表示事件。

1、连接到Event Store：实例化EKEventStore对象：EKEventStore *store=[[EKEventStore alloc] initWithAccessToEntityTypes:EKEntityMaskEvent];一个EKEventStore对象需要一段明显的时间来初始化和释放。

因此，你不应该为每个事件相关的任务都初始化和释放一个单独的event store。

取而代乊的，在你的应用加载时，初始化一个event store，并且重复使用它。

event store必须不能在其它的Event Kit对象乊前被release，否则未定义的行为可能发生。

2、检索事件有2个方法检索事件。

使用predicate或search query，将返回0或多个事件来匹配给定的查询条件。

使用唯一标识符将返回一个单独的事件。

注意：检索的事件不一定按照年代排序。

要通过日期排序一组EKEvent对象，调用sortedArrayUsingSelector:方法，并使用selector为compareStartDateWithEvent:方法。

Calendar控件

Calendar控件的常用属性属性说明Caption 获取或设置呈现为日历标题的文本值CaptionAlign 获取或设置呈现为日历标题的文本的对齐方式CellPadding 获取或设置单元格的内容和单元格的边框之间的空间量CellSpacing 获取或设置的单元格间的空间量DayHeaderStyle 获取显示一周中某天的部分的样式属性DayNameFormat 获取或设置一周中各天的名称格式DayStyle 获取显示的月份中日期的样式属性FirstDayOfWeek 获取或设置要在Calendar控件的“第一天”列中显示的一周中的某天NextMonthText 获取或设置为下一月导航控件显示的文本NextPrevFormat 获取或设置Calendar控件的标题部分中下个月和上个月导航元素的格式NextPrevStyle 获取下个月和上个月导航元素的样式属性OtherMonthDayStyle 获取不在显示的月份中的Calendar控件上的日期的样式属性PreMonthText 获取或设置为前一个月导航控件显示的文本SelectedDate 获取或设置选定的日期SelectedDates 获取System.DateTime对象的集合，这些对象表示Calendar控件上的选定日期SelectedDayStyle 获取选定日期的样式属性SelectionMode 获取或设置Calendar控件上的日期选择模式，该模式指定用户可以选择单日、一周还是整月SelectionMonthText 获取或设置为选择器列中月份选择元素显示的文本SelectorStyle 获取周和月选择器列的样式属性SelectWeekText 获取或设置为选择器列中周选择元素显示的文本ShowGridLines 获取或设置一个值，该值指示是否用网络线分割Calendar控件上的日期ShowDayHeader 获取或设置一个值，该值指示是否显示一周中各天的标头ShowNextPrevMonth 获取或设置一个值，该值指示Calendar控件是否在标题部分显示下个月和上个月的导航元素ShowTitle 获取或设置一个值，该值指示是否显示标题部分TitleFormat 获取或设置标题部分的格式TitleStyle 获取Calendar控件的标题标头的样式属性TodayDayStyle 获取Calendar控件上当天日期的样式属性TodaysDate 获取或设置当天日期的值UseAccessibleHeader 获取或设置一个值，该值指示是否为日标头呈现表标头<th>HTML元素，而不是呈现表数据<td>HTML元素VisibleDate 获取或设置指定要在Calendar控件上显示的月份的日期WeekendDayStyle 获取Calendar控件上周末日期的样式属性Calendar控件的常用方法方法说明AddDays 返回与指定的DateTime相距指定天数的DateTime AddHours 返回与指定DateTime相距指定小时数的DateTime AddMilliseconds 返回与指定DateTime相距指定毫秒数的DateTime AddMinutes 返回与指定DateTime相距指定分钟数的DateTime AddMonths 返回与指定DateTime相距指定月数的DateTime AddSeconds 返回与指定DateTime相距指定秒数的DateTime AddWeeks 返回与指定DateTime相距指定周数的DateTime AddYear 返回与指定DateTime相距指定年数的DateTime Clone 创建作为当前Calendar对象副本的新对象GetDayOfMonth 返回指定DateTime中的日期是该月的几号GetDayOfWeek 返回指定DateTime中的日期是星期几GetDayOfYear 返回指定DateTime中的日期是该年中的第几天GetDaysInMonth 返回指定月份中的天数GetDaysInYear 返回指定年份中的天数GetEra 返回指定的DateTime中纪元GetHour 返回指定的DateTime中的小时值GetLeapMonth 计算指定年份或指定纪元年份的闰月GetMilliseconds 返回指定的DateTime中的毫秒值GetMinute 返回指定的DateTime中的分钟值GetMonth 返回指定的DateTime中的月份GetMonthsInYear 返回指定年份中的月数GetSecond 返回指定的DateTime中的秒值GetWeekOfYear 返回年中包括指定DateTime中日期的星期GetYear 将返回指定的DateTime中的年份IsLeapDay 确定某天是否为闰日IsLeapMonth 确定某月是否为闰月IsLeapYear 确定某年是否为闰年ToDateTime 返回设置为指定日期和时间的DateTime ToFourDigitYear 使用TwoDigitYearMax属性将指定的年份转换为整数年份以确定相应的纪元。

日历的设定（Calendar）

⽇历的设定（Calendar）//采⽤单例模式获取⽇历对象Calendar.getInstance();Calendar c = Calendar.getInstance();//通过⽇历对象得到⽇期对象Date d = c.getTime();//设置当前⽇历⽇期c.setTime(d);//增加两个⽉c.add(Calendar.MONTH,2);//设置天数为：从1号开始倒数3天c.set(Calendar.DATE,-3);**add⽅法，在原⽇期上增加年/⽉/⽇**set⽅法，直接设置年/⽉/⽇package date;import java.text.SimpleDateFormat;//import java.util.Calendar;import java.util.Date;public class TestDate {private static SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");public static void main(String[] args) {Calendar c = Calendar.getInstance();Date now = c.getTime();// 当前⽇期System.out.println("当前⽇期：\t" + format(c.getTime()));// 下个⽉的今天c.setTime(now);c.add(Calendar.MONTH, 1);System.out.println("下个⽉的今天:\t" +format(c.getTime()));// 去年的今天c.setTime(now);c.add(Calendar.YEAR, -1);System.out.println("去年的今天:\t" +format(c.getTime()));// 上个⽉的第三天c.setTime(now);c.add(Calendar.MONTH, -1);c.set(Calendar.DATE, 3);System.out.println("上个⽉的第三天:\t" +format(c.getTime()));}private static String format(Date time) {return sdf.format(time);}}。

Calendar(日历控件)

ToString转换到一个字符串
DateTime的只读属性
属性名称说明
Date返回日期部分
Day返回月份中的日期
DayOfWeek返回一周中的日期，如Friday，Saturday等
DayOfYear返回年份中的日期
Hour返回小时部分
Millisecond返回毫秒部分
Minute返回分钟部分
Month返回月部分
DayRender事件处理程序接收两个DayRenderEventArgs类型的参数。
该对象有两个属性，它们可以用编程方式读取：
Cell表示要呈现的单元格的表格单元格对象。
Day表示呈现在单元格中日期的CalendarDay对象。
例如：
添加事件：
OnDayRender="Calendar1_DayRender"
VisibleDate显示月份的任意日期
在Calendar中选择日期
如果需要让用户可以选择一天、一周或一个月，则必须设置SelectionMode属性。
CalendarSelectionMode枚举成员
Day允许用户选择单个日期。这是默认值
DayWeek允许用户选择单个日期或整周
DayWeekMonth允许用户选择单个日期、周或整个月
IsToday指示该日期是否是今天
IsWeekend指示该日期是否是周末
VisibleMonthChanged事件当用户单击标题标头上的下个月或上个月导航控件时发生
例如：
添加事件：
OnVisibleMonthChanged="Calendar1_VisibleMonthChanged"
事件处理程序：
Second返回秒部分

第4章日历控件

第 4 章日历控件Calendar（月历）控件用于在 Web 页面中产生一个月历，以方便用户选择或设置日期数据。

Calendar 控件必须放在 Web Form、Panel 或控件的模板内。

向页面中添加了 Calendar 控件后，它可以每次显示一个月的日期（默认为系统时间的当前月）。

另外，它还显示该月之前的一周和之后的一周，即控件中可显示六周。

1. Calendar 控件的常用属性Calendar 控件的常用属性，见表 610。

表610 Calendar控件的常用属性属性说明FirstDayOfWeek 获取或设置要在 Calendar 控件的第一天列中显示的一周中的某天。

获取或设置为下一月导航控件显示的文本。

默认值为“&gt;”显示为一个大于号（>），只有在 NextMonthTextShowNextPreMonth属性设置为 True 时，该属性才有效。

PrevMonthText 获取或设置为前一月导航控件显示的文本。

SelectedDate 获取或设置选定的日期。

SelectedDates 获取 System.DateTime 对象的集合，这些对象表示 Calendar 控件上的选定日期。

SelectionMode 获取或设置 Calendar 控件上的日期选择模式，该模式指定用户可以选择单日、一周还是整月。

SelectMonthText 获取或设置为选择器列中月份选择元素显示的文本。

SelectWeekText 获取或设置为选择器列中周选择元素显示的文本。

ShowDayHeader 获取或设置一个值，该值指示是否显示一周中各天的标头。

ShowGridLines 获取或设置一个值，该值指示是否用网格线分隔 Calendar 控件上的日期。

ShowNextPrevMonth 获取或设置一个值，该值指示 Calendar 控件是否在标题部分显示下个月和上个月导航元素。

GUI学习之三十—QCalendarWidget学习总结

GUI学习之三⼗—QCalendarWidget学习总结今天学习的是最后⼀个展⽰控件——QCalendarWidget⼀.描述 QCalendarWidget提供了⼀个基于每⽉的⽇历控件，允许⽤户选择⼀个⽇期，还可以看⼀下⾥⾯的图⽰： QCalendarWidget是基于QWidget的⼀个⼦类，不像前⾯所⽤的QDialog⼀样具备弹出功能，所以要好多时候都需要结合QDialog使⽤。

⼆.功能作⽤ 1.⽇期范围QCalendarWidget.setMaximumDate(self, date: typing.Union[QtCore.QDate, datetime.date])QCalendarWidget.setMinimumDate(self, date: typing.Union[QtCore.QDate, datetime.date])QCalendarWidget.setDateRange(self, min: typing.Union[QtCore.QDate, datetime.date], max: typing.Union[QtCore.QDate, datetime.date]) 设定了范围后，如果⽇期超出了范围则相应⽇期会变灰。

2.⽇期编辑⽇期是可以通过⿏标点击来改变的，当然也可以通过键盘来实现QCalendarWidget.setDateEditEnabled() 这个设置默认值为True,在控件上可以直接⽤键盘输⼊，会有下⾯的效果也就是可以⽤键盘输⼊⽇期直接跳转在输⼊的过程中我们还可以通过下⾯的代码控制等待键盘输⼊的时间QCalendarWidget.setDateEditAcceptDelay(self, delay: int) #delay的值是ms 当然也可以获取上⾯的值QCalendarWidget.isDateEditEnabled() -> boolQCalendarWidget.dateEditAcceptDelay() -> int 还可以设置当前的时间self, date: typing.Union[QtCore.QDate, datetime.date] 我们可以通过⼀个按钮把⽇期返回到当下。

如何：在Calendar控件中显示数据库中的选定日期

如何：在Calendar控件中显⽰数据库中的选定⽇期控件并不直接⽀持数据绑定，也就是说，您不是将⽇历作为⼀个整体绑定到数据源。

相反，您编写代码来获取所需数据，然后就可以在事件中，将当前呈现的⽇期与从数据源读取的数据进⾏⽐较。

在 Calendar 控件中显⽰数据库数据1. 使⽤类型连接到数据库并查询要显⽰的⽇期。

2. 在 Calendar 控件的DayRender事件中，将当前呈现的⽇期与从数据库中检索到的数据进⾏⽐较。

如果存在匹配项，则⾃定义相应的⽇期显⽰。

⽰例下⾯的⽰例将假⽇信息从数据库读取到⼀个数据集。

当您选定⼀个⽉份时，将获取当前所选⽉份的⽇期，此⽇期范围是基于Calendar控件的属性定义的，该属性返回当前⽉的第⼀个⽇期。

每次⽤户导航到⼀个新的⽉份时，代码就会读取该⽉份的假⽇。

在DayRender事件中，代码会将当前呈现的⽇期与从数据库返回的⽇期进⾏⽐较。

如果有匹配的⽇期，则⽤特殊颜⾊标记这⼀天。

C#protected DataSet dsHolidays;protected void Page_Load(object sender, EventArgs e){if(!IsPostBack){Calendar1.VisibleDate = DateTime.Today;FillHolidayDataset();}}protected void FillHolidayDataset(){DateTime firstDate = new DateTime(Calendar1.VisibleDate.Year,Calendar1.VisibleDate.Month, 1);DateTime lastDate = GetFirstDayOfNextMonth();dsHolidays = GetCurrentMonthData(firstDate, lastDate);}protected DateTime GetFirstDayOfNextMonth(){int monthNumber, yearNumber;if(Calendar1.VisibleDate.Month == 12){monthNumber = 1;yearNumber = Calendar1.VisibleDate.Year + 1;}else{monthNumber = Calendar1.VisibleDate.Month + 1;yearNumber = Calendar1.VisibleDate.Year;}DateTime lastDate = new DateTime(yearNumber, monthNumber, 1);return lastDate;}protected DataSet GetCurrentMonthData(DateTime firstDate,DateTime lastDate){DataSet dsMonth = new DataSet();ConnectionStringSettings cs;cs = ConfigurationManager.ConnectionStrings["ConnectionString1"];String connString = cs.ConnectionString;SqlConnection dbConnection = new SqlConnection(connString);String query;query = "SELECT HolidayDate FROM Holidays " + _" WHERE HolidayDate >= @firstDate AND HolidayDate < @lastDate";SqlCommand dbCommand = new SqlCommand(query, dbConnection);dbCommand.Parameters.Add(new SqlParameter("@firstDate",firstDate));dbCommand.Parameters.Add(new SqlParameter("@lastDate", lastDate));SqlDataAdapter sqlDataAdapter = new SqlDataAdapter(dbCommand);try{sqlDataAdapter.Fill(dsMonth);}catch {}return dsMonth;}protected void Calendar1_DayRender(object sender, DayRenderEventArgs e){DateTime nextDate;if(dsHolidays != null){foreach(DataRow dr in dsHolidays.Tables[0].Rows){nextDate = (DateTime) dr["HolidayDate"];if(nextDate == e.Day.Date){e.Cell.BackColor = System.Drawing.Color.Pink;}}}}protected void Calendar1_VisibleMonthChanged(object sender,MonthChangedEventArgs e){FillHolidayDataset();}此⽰例基于当前显⽰的⽉份的⽇期⽣成⼀个查询。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

源码如下：1.<!DOCTYPE html> 2.<html> 3.<head> 4.<meta charset="UTF-8"> 5.<title>Basic Calendar - jQuery EasyUI Demo</title> 6.<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"> 7.<link rel="stylesheet" type="text/css" href="../../themes/icon.css"> 8.<link rel="stylesheet" type="text/css" href="../demo.css"> 9.<script type="text/javascript" src="../../jquery.min.js"></script> 10.<script type="text/javascript" src="../../jquery.easyui.min.js"></script> 11.</head> 12.<body> 13.<h2>Basic Calendar</h2> 14.<p>Click to select date.</p> 15.<div style="margin:20px 0"></div> 16.<div class="easyui-calendar" style="width:250px;height:250px;"></div> 17.18.</body> 19.</html>源码如下：1.<!DOCTYPE html> 2.<html> 3.<head> 4.<meta charset="UTF-8"> 5.<title>First Day of Week - jQuery EasyUI Demo</title> 6.<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"> 7.<link rel="stylesheet" type="text/css" href="../../themes/icon.css"> 8.<link rel="stylesheet" type="text/css" href="../demo.css"> 9.<script type="text/javascript" src="../../jquery.min.js"></script> 10.<script type="text/javascript" src="../../jquery.easyui.min.js"></script> 11.</head> 12.<body> 13.<h2>First Day of Week</h2> 14.<p>Choose the first day of the week.</p> 15.16.<div style="margin:20px 0"> 17.<select onchange="$('#cc').calendar({firstDay:this.value})"> 18.<option value="0">Sunday</option> 19.<option value="1">Monday</option> 20.<option value="2">Tuesday</option>Calendar 日历控件基本基本实现实现自定自定义义星期几作星期几作为为日历排列的第一天设置星期几作为日历显示中的第一天.Sunday21.<option value="3">Wednesday</option> 22.<option value="4">Thursday</option> 23.<option value="5">Friday</option> 24.<option value="6">Saturday</option> 25.</select> 26.</div> 27.28.<div id="cc" class="easyui-calendar" style="width:250px;height:250px;"></div> 29.</body> 30.</html>源码如下：1.<!DOCTYPE html> 2.<html> 3.<head> 4.<meta charset="UTF-8"> 5.<title>Custom Calendar - jQuery EasyUI Demo</title> 6.<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"> 7.<link rel="stylesheet" type="text/css" href="../../themes/icon.css"> 8.<link rel="stylesheet" type="text/css" href="../demo.css"> 9.<script type="text/javascript" src="../../jquery.min.js"></script> 10.<script type="text/javascript" src="../../jquery.easyui.min.js"></script> 11.</head> 12.<body> 13.<h2>Custom Calendar</h2> 14.<p>This example shows how to custom the calendar date by using 'formatter' function.</p> 15.<div style="margin:20px 0"></div> 16.17.<div class="easyui-calendar" style="width:250px;height:250px;" data-options="formatter:formatDay"></div> 18.19.<script> 20.var d1 = Math.floor((Math.random()*30)+1); 21.var d2 = Math.floor((Math.random()*30)+1); 22.function formatDay(date){ 23.var m = date.getMonth()+1; 24.var d = date.getDate(); 25.var opts = $(this).calendar('options'); 26.if (opts.month == m && d == d1){ 27.return '<div class="icon-ok md">' + d + '</div>'; 28.} else if (opts.month == m && d == d2){ 29.return '<div class="icon-search md">' + d + '</div>'; 30.} 31.return d; 32.} 33.</script> 34.<style scoped="scoped"> 35..md { 36.height: 16px; 37.line-height: 16px; 38.background-position: 2px center; 39.text-align: right; 40.font-weight: bold; 41.padding: 0 2px; 42.color: red; 43.} 44.</style> 45.</body> 46.</html>自定自定义义日历控件用'formatter'来自定义日历的显示.可以设计出自己喜欢的日历控件哦禁用禁用选选中指定日期只允许用户选择指定的日期，这里演示只允许用户选择星期一.源码如下：1.<!DOCTYPE html>2.<html>3.<head>4. <meta charset="UTF-8">5. <title>Disable Calendar Date - jQuery EasyUI Demo</title>6. <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">7. <link rel="stylesheet" type="text/css" href="../../themes/icon.css">8. <link rel="stylesheet" type="text/css" href="../demo.css">9. <script type="text/javascript" src="../../jquery.min.js"></script>10. <script type="text/javascript" src="../../jquery.easyui.min.js"></script>11.</head>12.<body>13. <h2>Disable Calendar Date</h2>14. <p>This example shows how to disable specified dates, only allows the user to select Mondays.</p>15. <div style="margin:20px 0"></div>16.17. <div class="easyui-calendar" style="width:250px;height:250px;" data-options="18. validator: function(date){19. if (date.getDay() == 1){20. return true;21. } else {22. return false;23. }24. }25. "></div>26.27.</body>28.</html>今年第几周显示选中日期是今年的第几周.源码如下：1.<!DOCTYPE html>2.<html>3.<head>4. <meta charset="UTF-8">5. <title>Week Number on Calendar - jQuery EasyUI Demo</title>6. <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">7. <link rel="stylesheet" type="text/css" href="../../themes/icon.css">8. <link rel="stylesheet" type="text/css" href="../demo.css">9. <script type="text/javascript" src="../../jquery.min.js"></script>10. <script type="text/javascript" src="../../jquery.easyui.min.js"></script>11.</head>12.<body>13. <h2>Week Number on Calendar</h2>14. <p>This example shows how to display the week number on calendar.</p>15. <div style="margin:20px 0"></div>16. <div class="easyui-calendar" showWeek="true" weekNumberHeader="Wk" style="width:250px;height:250px;"></div>17.18.</body>19.</html>流体布局。