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; }
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

417

418

419

420

421

422

423

424

425

426

427

428

429

430

431

432

433

434

435

436

437

438

439

440

441

442

443

444

445

446

447

448

449

450

451

452

453

454

455

456

457

458

459

460

461

462

463

464

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>ASP.NET FullCalendar</title>
    <link href="../ajax/libs/jqueryui/1.12.1/themes/cupertino/jquery-ui.min.css" rel="stylesheet" />
    <link href="fullcalendar.css" rel="stylesheet" />
    <link href="../ajax/libs/qtip2/3.0.3/jquery.qtip.min.css" rel="stylesheet" />   
    <link rel="stylesheet" media="all" type="text/css" href="../ajax/libs/timepicker/jquery-ui-timepicker-addon.css" /> 
    <link rel="stylesheet" href="../ajax/libs/formValidator/css/validationEngine.jquery.css" type="text/css"  media="screen" charset="utf-8" />
    <meta name="author" content="geovidu Geovin Du 涂聚文">
    <script src="../ajax/libs/moment.js/2.18.1/moment.min.js" type="text/javascript"></script>  
    <script src="../ajax/libs/jquery/3.1.1/jquery.js" type="text/javascript"></script>  
    <script src="../ajax/libs/jqueryui/1.12.1/jquery-ui.js" type="text/javascript"></script>  
    <script src="../ajax/libs/qtip2/3.0.3/jquery.qtip.min.js" type="text/javascript"></script>  
     <script type="text/javascript" src="../ajax/libs/timepicker/jquery-ui-timepicker-addon.js"></script>  
     <script type="text/javascript" src="../ajax/libs/timepicker/i18n/jquery-ui-timepicker-addon-i18n.min.js"></script>  
     <script type="text/javascript" src="../ajax/libs/timepicker/i18n/jquery-ui-timepicker-zh-CN.js"></script>  
     <script type="text/javascript" src="../ajax/libs/timepicker/jquery-ui-sliderAccess.js"></script> 
      <script src="lunar.js"  charset="utf-8" type="text/javascript"></script> 
    <script src="fullcalendar.js" type="text/javascript"></script>  
    <script src='locale-all.js' type="text/javascript"></script>  
        <script src="../ajax/libs/formValidator/js/jquery.validationEngine.js" type="text/javascript"></script>  
     <script src="../ajax/libs/formValidator/js/languages/jquery.validationEngine-zh_CN.js" type="text/javascript"></script>    
     <script src="../ajax/libs/jqueryui/1.12.1/ui/i18n/datepicker-zh-CN.js" type="text/javascript"></script> 
  
<style type='text/css'>
 
    /* 改造  */   
  
.fc-toolbar .fc-left{
    position: absolute;
    /*top: 0;
    left: 0;*/
    float: none;
}
  
.fc table > thead > tr > th div{
    font-weight: bold;
    color: #25992E;
    font-size:14px;
}
  
.fc-sat span,.fc-sun div{
    color: #ED6D23 !important;
}
  
.fc-ltr .fc-basic-view .fc-day-top .fc-day-number{
    width: 100%;
    text-align: right;
    display: block;
    font-size: 20px;
    font-family: Arial;
    font-weight: 600;
    padding: 12px 12px 0 12px;
    line-height: 23px;
    height: 23px;
    color: #555;
}
  
.fc-day-cnTerm{
    text-align: right;
    padding: 12px 12px 0 12px;
    color: #6ABA49;
    font-size: 12px;
}
  
.fc-day-cnDate{
    text-align: right;
    padding: 12px 12px 0 12px;
    color: #999;
    font-size: 12px;
}    
         
     
    </style>
<script type="text/javascript">
    /** 当天信息初始化 **/
 
 
    /** calendar配置 **/
    $(document).ready(
    function() {
 
         
         
         
    /*  */
    var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();
         
    /*  var dayDate = new Date();*/
        var dweek ="";// $.fullCalendar.formatDate(date,"dddd");
        var mdate =y+"-"+m+"-"+d; //$.fullCalendar.formatDate(date,"YYYY年MM月DD日");
        console.log(mdate);
        var lunarDate = lunar(mdate);
        $(".alm_date").html(y+"年"+m+"月"+d + "日 " + dweek);
        $(".today_date").html(date.getDate())
        $("#alm_cnD").html("农历"+ lunarDate.lMonth + "月" + lunarDate.lDate);
        $("#alm_cnY").html(lunarDate.gzYear+"年 "+lunarDate.gzMonth+"月 "+lunarDate.gzDate+"日");
        $("#alm_cnA").html("【"+lunarDate.animal+"年】");
        var fes = lunarDate.festival();
        if(fes.length>0){
            $(".alm_lunar_date").html($.trim(lunarDate.festival()[0].desc));
            $(".alm_lunar_date").show();
        }else{
            $(".alm_lunar_date").hide();
        }
     
            /** 绑定事件到日期下拉框 **/
        $("#fc-dateSelect").delegate("select","change",function(){
            var fcsYear = $("#fcs_date_year").val();
            var fcsMonth = $("#fcs_date_month").val();
            $("#calendar").fullCalendar('gotoDate', fcsYear, fcsMonth);
        });
     
         
         
         
    $("#calendar").fullCalendar(
        {
            header : {
                left : 'prevYear,nextYear',
                center : 'title',
                right : 'prev,next today,month,agendaWeek,agendaDay,listWeek'
            },
            //fullcalendar本地化
            //timeFormat:{agenda: 'h:mm TT{ - h:mm TT}'}, //默认是{agenda: ‘h:mm{ - h:mm}}, 影响的是添加的具体的日程上显示的时间格式.
            monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],  
            monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],  
            dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],  
            dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],  
            today: ["今天"],  
            firstDay: 0,  
            buttonText: {
                today: '今天',  
                month: '月',  
                week: '周',  
                day: '日',  
                listWeek:'日程',
                prev: "上个月",
                next: "下个月",
                prevYear: "上一年",
                nextYear: "下一年"
            },
            allDaySlot:false,
            //height: windowHeigth, 　　　　　　　　　　　　//设置日历高度，宽度是自适应的，不好改，windowHeight 是我计算的值
            //currentTimezone: 'Asia/Beijing', 　　　　　　//设置时区
            theme: true, 　　　　　　　　　　　　　　　　　//true 时日历主题可随 jQuery ui 的主题变化
            selectable: true, 　　　　　　　　　　　　　　//元素是否可以被选中
            selectHelper: true, 
            //选中元素时是否显示相关信息
             select: function(startDate, endDate, 　　　//选中某元素的方法，startDate 事项的起始时间，endDate 事项的结束时间
                        allDay, jsEvent, view) { 　　　　　　　　// allDay 事项是否为全天事项，jsEvent 控件的内置对象，view 当前视图
                        var startD = $.fullCalendar
                            .formatDate(startDate,
                                'yyyy-MM-dd HH:mm:ss'); 　　　　//formatDate 是格式化时间的方法
                        var endD = $.fullCalendar
                            .formatDate(endDate,
                                'yyyy-MM-dd HH:mm:ss');
                        //TODO      添加选中某元素时需要进行操作的方法，比如：添加会议、备注等事项
                    },
                    eventClick: function(event) { 　　　　　　　　//点击事项的方法
                        var startD = $.fullCalendar
                            .formatDate(event.start,
                                'yyyy-MM-dd HH:mm:ss');
                        var endD = $.fullCalendar
                            .formatDate(event.end,
                                'yyyy-MM-dd HH:mm:ss');
                        //TODO      添加点击某事项时需要进行操作的方法，比如：修改会议、备注等事项
                    },/*　*/
                    editable: true, //事项是否可编辑，改变大小、拖拽等
                     
                    eventResize: function(event, dayDelta, minuteDelta, revertFunc) { 
　　　　　　　　　　　　//事项大小改变后的方法，往往修改事项的起止时间，event 改变的事项，dayDelta 变化的天数，minuteDelta 变化的分钟数，revertFunc 回调函数
                        var startD = $.fullCalendar
                            .formatDate(event.start,
                                'yyyy-MM-dd HH:mm:ss');
                        var endD = $.fullCalendar
                            .formatDate(event.end,
                                'yyyy-MM-dd HH:mm:ss');
 
                        //TODO      添加改变某事项大小时需要进行操作的方法，比如：修改会议、备注等事项
 
                        if (!confirm("is this okay?")) {
                            revertFunc();        　　　　　　　　//如果不要改变，则将事项还原
                        }
 
                    },
                    eventDrop: function(event, dayDelta, minuteDelta, allDay, revertFunc) {    //拖拽事项之后的方法，allDay 是否全天事项，其他参数同上
                        var startD = $.fullCalendar
                            .formatDate(event.start,
                                'yyyy-MM-dd HH:mm:ss');
                        var endD = $.fullCalendar
                            .formatDate(event.end,
                                'yyyy-MM-dd HH:mm:ss');
 
                        //TODO      添加拖拽某事项之后需要进行操作的方法，比如：修改会议、备注等事项
 
                        if (!confirm("is this okay?")) {
                            revertFunc();        
                        }
 
                    },/**/
                eventMouseover: function(event, jsEvent, view){                 
                   showDetail(event, jsEvent);                    
           },
            eventMouseout: function(event, jsEvent, view){
                $('#tip').remove();
            },
            events: [
                {
                    title: 'All Day Event',
                    description:'涂聚文',
                    start: new Date(y, m, 1),
                    end: new Date(y, m, 2)
                },
                {
                    title: 'Long Event',
                    description:'涂聚文2',
                    start: new Date(y, m, d-5),
                    end: new Date(y, m, d)
                },
                {
                    id: 999,
                    title: 'Repeating Event',
                    description:'涂聚文3',
                    start: new Date(y, m, d-3, 16, 0),
                    end: new Date(y, m, d-3, 18, 0),
                    allDay: false
                },
                {
                    id: 999,
                    title: 'Repeating Event',
                    description:'涂聚文4',
                    start: new Date(y, m, d+4, 16, 0),
                    end: new Date(y, m, d+4, 18, 0),
                    allDay: false
                },
                {
                    title: 'Meeting',
                    description:'涂聚文5',
                    start: new Date(y, m, d, 10, 30),
                    end: new Date(y, m, d, 18, 20),
                    allDay: false
                },
                {
                    title: 'Lunch',
                    description:'涂聚文6',
                    start: new Date(y, m, d, 12, 0),
                    end: new Date(y, m, d, 14, 0),
                    allDay: false
                },
                {
                    title: 'Birthday Party',
                    description:'涂聚文7',
                    start: new Date(y, m, d+1, 19, 0),
                    end: new Date(y, m, d+1, 22, 30),
                    allDay: false
                },
                {
                    title: 'Click for Google',
                    description:'涂聚文8',
                    start: new Date(y, m, 28),
                    end: new Date(y, m, 29),
                    url: 'http://google.com/'
                }
            ],
            //
            dayClick : function(dayDate, allDay, jsEvent, view) { //点击单元格事件         
                var d = $.fullCalendar.formatDate(dayDate,"dddd"); //周几
                var m = $.fullCalendar.formatDate(dayDate,"YYYY年MM月DD"); //yyyy年MM月dd日
                console.log("d:"+d);
                console.log("m:"+m);
                console.log("dayDate:"+dayDate);
                var date=$.fullCalendar.formatDate(dayDate,"YYYY-MM-DD");
                var datedu=new Date(date);
                var lunarDate = lunar(date);
                $(".alm_date").html(m + " " + d);
                $(".today_date").html(datedu.getDate())
                $("#alm_cnD").html("农历"+ lunarDate.lMonth + "月" + lunarDate.lDate);
                $("#alm_cnY").html(lunarDate.gzYear+"年 "+lunarDate.gzMonth+"月 "+lunarDate.gzDate+"日");
                $("#alm_cnA").html("【"+lunarDate.animal+"年】");
                console.log(lunarDate.gzMonth);
                 
                var fes = lunarDate.festival();
                if(fes.length>0){
                    $(".alm_lunar_date").html($.trim(lunarDate.festival()[0].desc));
                    $(".alm_lunar_date").show();
                }else{
                    $(".alm_lunar_date").hide();
                }
                // 当天则显示“当天”标识
                var now = new Date();
                if (now.getDate() == datedu.getDate() && now.getMonth() == datedu.getMonth() && now.getFullYear() == datedu.getFullYear()){
                    $(".today_icon").show();
                }else{
                    $(".today_icon").hide();
                }
            },
            loading : function(bool) {
                if (bool)
                    $("#msgTopTipWrapper").show();
                else
                    $("#msgTopTipWrapper").fadeOut();
            }
 
        });
    });
     
function showDetail(obj, e){
        var str;
        if(obj.messagenotice == 1)  str = "提醒时间："+$.fullCalendar.formatDate(obj.remindertime,"YYYY-MM-DD HH:mm:ss");
        else {str = "提醒未启动";}
        var eInfo = '<div id="tip"><ul>';
        eInfo += '<li class="clock">' + '开始：'+$.fullCalendar.formatDate(obj.start,"YYYY-MM-DD HH:mm:ss") +'</br>结束：'+$.fullCalendar.formatDate(obj.end,"YYYY-MM-DD HH:mm:ss")+ '</li>';
        eInfo += '<li class="message">' +'標題：'+ obj.title + '<br/> </li>';
        eInfo += '<li class="message">' +'詳情：'+ obj.description + '<br/> </li>';
        //eInfo += '<li>分类：' + obj.title + '</li>';
        eInfo += '<li class="postmessage">' + str + '<br/> </li>';
        eInfo += '</ul></div>';
        $(eInfo).appendTo($('body'));
        $('#tip').css({"opacity":"0.4", "display":"none", "left":(e.pageX + 20) + "px", "top":(e.pageY + 10) + "px"}).fadeTo(600, 0.9);
        //鼠标移动效果
        $('.fc-event-inner').mousemove(function(e){
            $('#tip').css({'top': (e.pageY + 10), 'left': (e.pageX + 20)});
        });
    }    
 
 
    </script>
<style>
 
    body {
        margin-top: 40px;
        text-align: center;
        font-size: 14px;
        font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
        }
 
    .calendarWrapper {
    width: 1190px;
    margin: 0 auto 15px;
}
 
#calendar {
    width: 885px;
    background: #fff;
    padding: 15px 10px;
}
 
.calendarWrapper .rightSidePanel {
    width: 240px;
    padding: 0px 15px;
}
    .dib{display: inline-block;}
    .fr{float: right;}
     
    /** 页面额外组件样式 **/
.h_calendar_alm {
border: 1px solid #c3e6b3;
}
.alm_date {
height: 33px;
line-height: 33px;
background: #fff;
text-align: center;
color: #555;
font-family: "Microsoft YaHei";
font-size: 14px;
}
.alm_content {
    padding: 10px 0px 15px;
border-top: 3px solid #b3deaf;
background: #e0f4d7;
position: relative;
}
.today_icon {
width: 50px;
height: 54px;
background: url(images/today_icon.jpg) no-repeat;
position: absolute;
left: 160px;
top: -3px;
}
.today_date {
font-size: 72px;
color: #1f9237;
line-height: 85px;
font-family: "Microsoft YaHei";
text-align: center;
}
.alm_content p {
text-align: center;
color: #6aba49;
font-size: 12px;
line-height: 22px;
}
.alm_content .alm_lunar_date {
width: 190px;
height: 30px;
margin: 0 auto;
line-height: 30px;
text-align: center;
color: #ed6d23;
font-size: 14px;
font-family: "Microsoft YaHei";
background: url(images/alm_lunar_date.png) no-repeat;
}
 
/********************************************** 鼠标悬停tip提示  ************************************************/
    #tip{
        position: absolute;
        width: 250px;
        max-width: 400px;
        text-align: left;
        padding: 4px;
        border: #87CEEB solid 7px;
        border-radius: 5px;
        background: #00BFFF;
        z-index: 1000;
        behavior: url('/css/css3/pie.htc');
    }
    #tip ul{
        margin: 0;
        padding: 0;
    }
    #tip ul li{
        font-family:'Microsoft YaHei', 微软雅黑, 'Microsoft JhengHei', 宋体;
        font-size:15px;
        list-style: none;
        padding-left: 40px;
    }
</style>
 
 
</head>
<body>
<div id="msgTopTipWrapper" style="display:none">
        <div id="msgTopTip">
            <span><i class="iconTip"></i>正在载入日历数据...</span>
        </div>
    </div>
    <div class="calendarWrapper">
        <div class="rightSidePanel mb50 fr">
            <div id="div_day_detail" class="h_calendar_alm">
                <div class="alm_date"></div>
                <div class="alm_content nofestival">
                    <div class="today_icon"></div>
                    <div class="today_date"></div>
                    <p id="alm_cnD"></p>
                    <p id="alm_cnY"></p>
                    <p id="alm_cnA"></p>
                    <div class="alm_lunar_date"></div>
                </div>
            </div>
        </div>
        <div id="calendar" class="dib"></div>
    </div>
 
</body>
</html>

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: 用于切换到上一月/周/日视图的按钮 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

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	设置日历年份，必须为4位如：2013，如果不设置则默认为当前年份
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年, 月份向后移动2月, 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	指定哪些元素不会清空当前的选中，以JQUERY选择器的方式指定 '#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最重要的部分，设置用于日程事件相关信息。

Event 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后面会有文章专门介绍事件数据的操作，包括数据的查询、写入、更新和删除操作。

以下是Event事件相关的参数属性说明。

属性	描述	默认值
eventSources	事件源，存储数组对象，可以是Arrays/Functions/URLs。
allDayDefault	是否为全天日程事件，显示这一天中所做的事情。	true
ignoreTimezone	是否忽略时区。	true
startParam	在使用URL方式获取events数据源的时候, 自动插入到URL中的参数, 表示当前需要抓取的日程事件的起始时间。	'start'
endParam	和startParam参数意义相同, 表示要抓取的日程事件的终止时间。	'end'
lazyFetching	是否从缓存信息获取event。比如从月视图切换到周视图。	true
eventDataTransform	callback，将外部数据源转换成Fullcalendar可以处理的数据
loading	callback，日历开始加载的时候，isLoading参数为true触发一次，日历加载完毕，isLoading参数为false触发一次，用法： function(isLoading, view)
updateEvent	method，更新日历空间中的一个日程事件，如果是重复的日程事件，则都更新。用法： $('#calendar').fullCalendar( 'updateEvent', event )
clientEvents	method，返回FullCalendar已经存储到客户端的CalEvents对象数组，第二个参数和removeEvents方法的第二个参数意义相同，只不过在过滤器中，如果返回true，则该CalEvent对象将被加入到返回的数组中。
removeEvents	method，从日历中删除一个日程事件. 第二个参数可以不填，可以填id，可以是一个过滤器(一个函数，接受CalEvent对象作为参数)。用法： $('#calendar').fullCalendar( 'removeEvents' [, idOrFilter ] )
refetchEvents	method，重新抓取所有的日程事件源上的日程事件并渲染它们。
addEventSource	method，添加一个日程事件源，添加之后， 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，日程事件被拖动之前和之后触发。这里的拖动不一定是一个有效的拖动，只要日程事件的控件被拖着动了，事件就触发。可以从该对象中获取位移，位置等数据。用法： function( event, jsEvent, ui, view ) { }
eventDrop	callback，当拖拽完成并且时间改变时触发，用法： function( event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view ) { } ayDelta 保存日程向前或者向后移动了多少天 minuteDelta 这个值只有在agenda视图有效，移动的时间 allDay 如果是月视图，或者是agenda视图的全天日程，此值为true,否则为false
eventResizeStart, eventResizeStop	callback，在一个日程事件改变大小之前之后发生(不一定要改变成功)，用法： 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

posted @ 2016-01-06 12:03 ®Geovin Du Dream Park™ 阅读(1128) 评论(0) 编辑收藏举报

®Geovin Du Dream Park™

why we only heard about haves and have-nots, but we did'nt heard about doers and doer-nots. 人生是一种心境,生活是一种艺术,成功是一种心态,幸福是一种感觉,竞争是一种建构,情感是一种容合.学习是一种成长.

C# Web Forms - Using jQuery FullCalendar

ASP.NET MVC 3 RTM Tools Update

普通显示设置

视图

日程选项

当前日期设置

文本与时间定制

鼠标单击和滑过

选择操作

日程事件数据

事件渲染

日程事件拖动和缩放

日期工具

公告

搜索

常用链接

我的标签

积分与排名

随笔分类

随笔档案

文章分类

相册

捷为工作室

阅读排行榜

评论排行榜

推荐排行榜

最新评论