C#C# Web Forms – Using jQuery FullCalendar

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel='stylesheet' type='text/css' href='http://arshaw.com/js/fullcalendar/fullcalendar.css' />
    <script type='text/javascript' src='http://arshaw.com/js/fullcalendar/jquery/jquery.js'></script>
    <script type='text/javascript' src='http://arshaw.com/js/fullcalendar/jquery/jquery-ui-custom.js'></script>
    <script type='text/javascript' src='http://arshaw.com/js/fullcalendar/fullcalendar.min.js'></script>
    <script type="text/javascript">
        $(function ()
        {
            $('#calendar').fullCalendar({
                events: "/Sample.ashx"
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="calendar">
    </div>
    </form>
</body>
</html>

  Sample.ashx(handler):

<%@ WebHandler Language="C#" Class="Sample" %>

using System;
using System.Collections.Generic;
using System.Web;
using System.IO;

public class Sample : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        context.Response.Expires = -1;
        IList<CalendarDTO> tasksList = new List<CalendarDTO>();

        tasksList.Add(new CalendarDTO
        {
            id = 1,
            title = "Google search",
            start = ToUnixTimespan(DateTime.Now),
            end = ToUnixTimespan(DateTime.Now.AddHours(4)),
            url = "www.google.com"
        });
        tasksList.Add(new CalendarDTO
        {
            id = 1,
            title = "Bing search",
            start = ToUnixTimespan(DateTime.Now.AddDays(1)),
            end = ToUnixTimespan(DateTime.Now.AddDays(1).AddHours(4)),
            url = "www.bing.com"
        });
        System.Web.Script.Serialization.JavaScriptSerializer oSerializer =
         new System.Web.Script.Serialization.JavaScriptSerializer();
        string sJSON = oSerializer.Serialize(tasksList);
        context.Response.Write(sJSON);
    }

    private long ToUnixTimespan(DateTime date)
    {
        TimeSpan tspan = date.ToUniversalTime().Subtract(
            new DateTime(1970, 1, 1, 0, 0, 0));

        return (long)Math.Truncate(tspan.TotalSeconds);
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
    public class CalendarDTO
    {
        public int id { get; set; }
        public string title { get; set; }
        public long start { get; set; }
        public long end { get; set; }
        public string url { get; set; }
    }
}

  

 http://fullcalendar.io/

http://forums.asp.net/t/1610002.aspx?C+Web+Forms+Using+jQuery+FullCalendar

http://www.whatibroke.com/?p=581

http://ext.ensible.com/deploy/dev/examples/

https://github.com/sporritt/jsplumb 画流程图

http://jsplumbtoolkit.com

http://sensenet.codeplex.com/releases/view/618892  Sense/Net ECM –
Enterprise CMS

ASP.NET MVC 3 RTM Tools Update

https://www.microsoft.com/zh-cn/download/details.aspx?id=1491

FullCalendar提供了丰盛的性能设置和章程调用,开发者可以依照FullCalendar提供的API神速完毕二个日历日程的开发,本文将FullCalendar的常用属性和艺术、回调函数等整治成人中学文文书档案,以供参考。当前版本1.6.4。

一般而言显示设置

属性

描述

默认值

header

安装日历底部新闻。
设若设置为false,则不出示尾部音信。包涵left,center,right左中右四个职分,每一种地点都得以对应以下两样的安插:
title: 突显当前月份/周/日新闻
prev: 用于切换来上6月/周/日视图的按钮
next: 用于切换成下四月/周/日视图的按钮
prevYear:用于切换来上一年视图的按钮
nextYear:用于切换到下一年视图的按钮

{
left: ‘title’,
center: ”,
right: ‘today prev,next’
}

theme

是还是不是允许利用jquery的ui主旨,假诺设置为true,则要求加载jquery
ui相关css和js文件。

false

buttonIcons

安装header中选拔的prev,
next等变量对应按钮的体裁,唯有当theme为true时才使得,假使您调用了jQuery
ui样式但又不想行使它的图标样式,能够将此属性设置为false

{ prev: ‘circle-triangle-w’, next: ‘circle-triangle-e’ }

firstDay

设置三日中展现的首后天是哪一天,星期六是0,星期日是1,类推。

0

isRTL

安装为ture时则日历从右往左展现,貌似是针对性阿拉伯人设计的。

false

weekends

是不是出示周末,设为false则不显得星期四和星期二。

true

hiddenDays

潜伏一周中的某一天或某几天,数组格局,如隐藏周六和周二:[2,5],私下认可不隐藏,除非weekends设置为false。

[]

weekMode

在月视图里展现周的形式,因为每月周数恐怕区别,所以月视图高度不必然。
fixed:固定展现6周高,日历惊人保持不变
liquid:不固定周数,中度随周数变化
variable:不固定周数,但可观稳定

‘fixed’

weekNumbers

是或不是在日历中展现周次(一年中的第几周),假若设置为true,则会在月视图的左边、周视图和日视图的左上角展现周数。

false

weekNumberCalculation

周次的显得格式。

“iso”

height

设置日历的惊人,包蕴header日历尾部,暗中认可未安装,中度根据aspectRatio值自适应。

 

contentHeight

安装日历主体内容的莫斯中国科学技术大学学,不包罗header部分,默许未设置,中度根据aspectRatio值自适应。

 

aspectRatio

安装日历单元格宽度与中度的百分比。

1.35

handleWindowResize

是否随浏览器窗口大小变化而活动生成。

true

windowResize

callback,当浏览器窗口变化时触发function,使用:
$(‘#calendar’).fullCalendar({
windowResize: function(view) {
alert(‘The calendar has adjusted to a window resize’);
}
});
 

render

method,绑定日历到id上。
$(‘#id’).fullCalendar(‘render’);

destroy

method,销毁id日历,把日历回复到最先化前情形。
$(‘#id’).fullCalendar(‘destroy’);

视图

FullCalendar提供七种可用视图,包罗month(月视图),basicWeek(基本周视图,左侧不显得具体时刻),basicDay(基本日视图,右侧不出示具体日子),agendaWeek(周视图),agendaDay(日视图)。

View视图对象的习性:

属性 描述
name 包括month,basicWeek,basicDay,agendaWeek,agendaDay
title 标题内容(例如"2013年9月" or "Sep 7 – 13 2013")
start Date类型, 该view下的第一天
end Date类型, 该view下的最后一天. 由于是一个闭合的值, 所以, 比如在month view下, 10月这个月份, 那么end对应的应该是11月的第一天
visStart Date类型. 在该view下第一个可以访问的day. month view下, 该值是当月的第一天, week view下, 则通常和start一致
visEnd Date类型, 最后一个可访问的day

C#,View别的属性和格局

属性

描述

默认值

defaultView

日历开端化时暗许视图

‘month’

getView

method,取得视图对象消息,如得到当前视图的标题内容:
var view = $(‘#calendar’).fullCalendar(‘getView’); alert(“The view’s
title is ” + view.title);

changeView

method,切换视图
.fullCalendar(‘changeView’,viewName)
viewName为5种视图中的一种

日程选项

以下选项设置适用于agendaWeek和agendaDay视图里。

属性 描述 默认值
allDaySlot 在agenda视图模式下,是否在日历上方显示all-day(全天) true
allDayText 定义日历上方显示全天信息的文本 ‘all-day’
axisFormat 设置日历agenda视图下左侧的时间显示格式,默认显示如:5:30pm ‘h(:mm)tt’
slotMinutes 在agenda的视图中, 两个时间之间的间隔(分钟) 30
defaultEventMinutes 事件默认的时间执行长度,如果事件对象没有指定执行多长时间,则默认执行两个小时 120
firstHour 当切换到agenda时,初始滚动条滚动到的时间位置,默认在6点钟的位置 6
minTime 设置显示的时间从几点开始 0
maxTime 设置显示的时间从几天结束 24
slotEventOverlap 设置视图中的事件显示是否可以重叠覆盖 true

脚下日期设置

属性

描述

默认值

year

安装日历年份,必须为三人如:二零一三,假如不安装则私下认可为目二零一七年度

 

month

设置开首化日历的月度,从0开始,假若年份和月份都未钦点,则从元月底始。

 

date

设置日历伊始化时的日子,唯有在周视图和日视图中有效

 

prev

method,进入到上四月(周、天)视图
$(‘#calendar’).fullCalendar(‘prev’);

next

method,进入到下六月(周、天)视图
$(‘#calendar’).fullCalendar(‘next’);

prevYear

method,进入上一年视图

nextYear

method,进入下一年视图

today

method,进入当天

gotoDate

method,内定进入日历中的某一天
$(‘#calendar’).fullCalendar( ‘gotoDate’, year [, month, [ date ]] )

incrementDate

method, 以当前岁月为轴, 将日历向前, 或向后移动内定长度的年华, 比如:
$(‘#calendar’).fullCalendar(‘incrementDate’, -3, 2,
-5)就象征将日历年份向前挪动3年, 月份向后移动7月, day(天数)向前移动5天。

getDate

method,重回当今天历中的日期

文本与时光定制

您能够依据项目要求设置日历呈现的公文音信,如中文的月份等。

属性 描述 默认值
timeFormat 设置显示的日程事件的时间格式,如timeFormat: ‘H:mm’ 则显示24小时制的像10:30 {agenda: ‘h:mm{ – h:mm}}
columnFormat 设置显示日历每列表头信息的格式文本,默认:
{
month: ‘ddd’, // Mon
week: ‘ddd M/d’, // Mon 9/7
day: ‘dddd M/d’ // Monday 9/7 }
见描述
titleFormat 设置用于显示日历头部的文本信息,默认:
{
month: ‘MMMM yyyy’, // September 2013
week: "MMM d[ yyyy]{ ‘—'[ MMM] d yyyy}", // Sep 7 – 13 2013
day: ‘dddd, MMM d, yyyy’ // Tuesday, Sep 8, 2013
}
见描述
buttonText 设置日历头部各按钮的显示文本信息,默认:
{
prev: ‘‹’, // ‹
next: ‘›’, // ›
prevYear: ‘«’, // «
nextYear: ‘»’, // »
today: ‘today’,
month: ‘month’,
week: ‘week’,
day: ‘day’
}
见描述
monthNames 月份全称,默认:
[‘January’, ‘February’, ‘March’, ‘April’, ‘May’, ‘June’, ‘July’, ‘August’, ‘September’, ‘October’, ‘November’, ‘December’]
见描述
monthNamesShort 月份名称简写,默认:[‘Jan’, ‘Feb’, ‘Mar’, ‘Apr’, ‘May’, ‘Jun’ ‘Jul’, ‘Aug’, ‘Sep’, ‘Oct’, ‘Nov’, ‘Dec’] 见描述
dayNames 星期全称,默认:[‘Sunday’, ‘Monday’, ‘Tuesday’, ‘Wednesday’, ‘Thursday’, ‘Friday’, ‘Saturday’] 见描述
dayNamesShort 星期名称简写,默认:[‘Sun’, ‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’, ‘Sat’] 见描述
weekNumberTitle 周次,即一年中的第几周 "W"

鼠标单击和滑过

以下列出的是当鼠标单击大概滑过日历中的有些成分时,回调的函数callback。

属性 描述
dayClick 当单击日历中的某一天时,触发callback,用法:
$(‘#calendar’).fullCalendar({
dayClick: function(date, allDay, jsEvent, view) {
do something…
}
});
date是点击的day的时间(如果在agenda view, 还包含时间),在月view下点击一天时,allDay是true,在agenda模式下,点击all-day的窄条时,allDay是true,点击其他的agenda view下的day则为false,jsEvent就是一个普通的javascript事件,包含的是click事件的基础信息。
eventClick 当点击日历中的某一日程(事件)时,触发此操作,用法:
$(‘#calendar’).fullCalendar({
dayClick: function(event, jsEvent, view) {
do something…
}
});
event是日程(事件)对象,jsEvent是个javascript事件,view是当前视图对象。
eventMouseover
eventMouseout
鼠标划过和离开的事件,用法和参数同上

挑选操作

属性

描述

默认值

selectable

是还是不是同意用户通过单击或拖动选用日历中的对象,包罗天和时间。

false

selectHelper

当点击或拖动选取时间时,突显默许加载的提醒音信,该属性只在周/天视图里可用。

false

unselectAuto

当点击页面日历以外的职责时,是不是自动打消当前的入选状态。

true

unselectCancel

钦点哪些要素不会清空当前的当选,以JQUECRUISERY选取器的办法内定 ‘#someId’。

select

callback,被入选的函数回调,使用办法:
function( startDate, endDate, allDay, jsEvent, view )
startDate:被选中区域的开首时间
endDate:被选中区域的竣事作时间间
allDay:是或不是为全天事件
startDate:jascript对象
startDate:当前视图对象
 

unselect

callback,选中被撤消时的回调,使用方法:
function( view, jsEvent )

select

method,选中某些时刻,使用方法:
$(‘#calendar’).fullCalendar( ‘select’, startDate, endDate, allDay )

unselect

method,撤废选中,使用格局:
$(‘#calendar’).fullCalendar( ‘unselect’ )

日程事件数量

FullCalendar最关键的一些,设置用于日程事件有关音讯。

伊夫nt
Object,事件目的,用来储存多个日历事件音讯的科班对象,唯有title和start是必须的

属性 描述
id 可选,事件唯一标识,重复的事件具有相同的id
title 必须,事件在日历上显示的title
allDay 可选,true or false,是否是全天事件。
start 必须,事件的开始时间。
end 可选,结束时间。
url 可选,当指定后,事件被点击将打开对应url。
className 指定事件的样式。
editable 事件是否可编辑,可编辑是指可以移动, 改变大小等。
source 指向次event的eventsource对象。
color 背景和边框颜色。
backgroundColor 背景颜色。
borderColor 边框颜色。
textColor 文本颜色。

事件源对象

事件源即日历中的数据来源于,FullCalendar提供了数组、函数调用、以及JSON数据的样式,当然也可以由此谷歌(Google)Calendar
feed获取数据接口。helloweba.com前边会有小说特别介绍事件数量的操作,包蕴数据的询问、写入、更新和删除操作。

以下是伊芙nt事件相关的参数属性表达。

属性

描述

默认值

eventSources

事件源,存款和储蓄数组对象,能够是Arrays/Functions/ULANDLs。

 

allDayDefault

是不是为全天日程事件,呈现这一天中所做的工作。

true

ignoreTimezone

是不是忽略时区。

true

startParam

在行使U福睿斯L方式赢得events数据源的时候, 自动插入到U奥迪Q7L中的参数,
表示近期要求抓取的日程事件的起先时间。

‘start’

endParam

和startParam参数意义一样, 表示要抓取的日程事件的告一段落时间。

‘end’

lazyFetching

是或不是从缓存音讯获得event。比如从月视图切换成周视图。

true

eventDataTransform

callback,将表面数据源转换来Fullcalendar能够处理的数额

loading

callback,日历起初加载的时候,isLoading参数为true触发1回,日历加载达成,isLoading参数为false触发二回,用法:
function(isLoading, view)

updateEvent

method,更新日历空间中的一个日程事件,若是是双重的日程事件,则都更新。用法:
$(‘#calendar’).fullCalendar( ‘updateEvent’, event )

clientEvents

method,再次回到FullCalendar已经储存到客户端的Cal伊芙nts对象数组,
第一个参数和remove伊芙nts方法的第三个参数意义一样, 只可是在过滤器中,
假设重回true, 则该Cal伊夫nt对象将被参预到重返的数组中。

removeEvents

method,从日历中去除3个日程事件. 第②个参数能够不填, 能够填id,
可以是1个过滤器(1个函数, 接受Cal伊夫nt对象作为参数)。用法:
$(‘#calendar’).fullCalendar( ‘removeEvents’ [, idOrFilter ] )

refetchEvents

method,重新抓取全数的日程事件源上的日程事件并渲染它们。

addEventSource

method,添加3个日程事件源,添加之后,
FullCalendar会立即从该源获取日程事件,
并加载到日历中。第二个参数和定义Calendar时候使用的url参数一致。

removeEventSource

method,移除三个日程事件源,该源上收获得到的日程时间也将被马上从日历中移除。

事件渲染

 

属性 描述
eventColor
eventBackgroundColor
eventBorderColor
eventTextColor
设置日程事件的背景色和边框色,以及文本颜色。可以使用任意支持css的颜色方式,如 #f00, #ff0000, rgb(255,0,0), or red。
eventRender callback,当日程事件渲染时触发,用法:
function(calEvent, element, view)
eventAfterRender callback,当日程事件被渲染后触发,用法:
function( event, element, view ) { }
eventDestroy callback,当日程事件移出时触发,用法:
function( event, element, view ) { }
renderEvent method,一旦日历重新取得日程源,则原有日程将消失,当指定stick为true时,日程将永久的保存到日历上。
rerenderEvents method,重新渲染所有事件。

日程事件拖动和缩放

拖动和缩放功能依赖于jQuery
ui的draggable和resizable,所以在选用时要提早加载jQuery
ui
有关插件。

属性

描述

默认值

editable

是或不是可编写制定,即开始展览可拖动和缩放操作。

false

eventStartEditable

是不是让事件在开班时就能够拖动。

true

dragRevertDuration

假定拖拽不成功,多长期回复原状,微秒

500

dragOpacity

拖动时候的不发光度。
{
agenda:.5 //对于agenda试图
”:1.0 //别的视图
}

见描述

eventDragStart,
eventDragStop

callback,日程事件被拖动以前和事后触发。那里的拖动不自然是3个卓有效能的拖动,只要日程事件的控件被拖着动了,事件就接触。
可以从该对象中取得位移,地方等数码。用法: function( event, js伊夫nt, ui,
view ) { }

eventDrop

callback,当拖拽完结同时时间转移时接触,用法:
function( event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui,
view ) { }
ayDelta 保存日程向前只怕向后移动了稍稍天
minuteDelta 这几个值唯有在agenda视图有效,移动的小时
allDay 要是是月视图,恐怕是agenda视图的全天日程,此值为true,不然为false

eventResizeStart, 
eventResizeStop

callback,在1个日程事件改变大小在此以前之后发生(不肯定要改成成功),用法:
function( event, jsEvent, ui, view ) { }

eventResize

callback,在日程事件改变大小并打响后调用,
参数和eventDrop参数用法一致。用法:
function( event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view )
{ }

日期工具

函数 描述
formatDate 格式化日期,通过指定的格式格式化一个日期,返回一个字符串。options选项是一个对象,其中设置本地化变量支持的属性值. 比如{ monthNames : [‘一月’,’二月’,……],dayNames: [‘周日’,’周一’,…..]},用法:
$.fullCalendar.formatDate( date,formatString [,options ] )
formatDates 一次格式化两个日期,和上一个格式化日期类似,只不过,这里在formatString中使用大括号{…}来描述第二个日期的格式化方式。用法:
$.fullCalendar.formatDates( date1,date2,formatString [,options ] )
parseDate 解析日期,将一个字符串格式成一个javascript的Date对象,这个string可以是ISO8601,IETF,UNIX时间戳三种格式。用法:
$.fullCalendar.parseDate( string )
parseISO8601 将一个ISO8601字符串转换成一个javascript 的Date对象。用法:
$.fullCalendar.parseISO8601( string [,ignoreTimezone ] )

参考文献:

合法文书档案:http://arshaw.com/fullcalendar/docs/

https://fullcalendar.io/docs/

https://github.com/fullcalendar/fullcalendar/releases

https://github.com/fullcalendar/fullcalendar-scheduler/releases

FullCalendar
官方文书档案翻:http://www.cnblogs.com/mycoding/archive/2011/05/20/2052152.html

 

多国语言:http://poedit.net/

http://sourceforge.net/projects/gettextnet/

git.oschina.net/Hont/GunGetTextSeriHelper

 

相关文章