fullcalendar中文文档_fullcalendar教程

(2) 2024-07-27 09:23

Hi,大家好,我是编程小6,很荣幸遇见你,我把这些年在开发过程中遇到的问题或想法写出来,今天说一说
fullcalendar中文文档_fullcalendar教程,希望能够帮助你!!!。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

<title>日程安排</title>

<link rel="stylesheet" type="text/css" href="css/fullcalendar.css">

<style type="text/css">


#calendar{


width:960px; 


margin:20px auto;


}

</style>

<script src='js/jquery-1.9.1.min.js'></script>

<script src='js/jquery-ui-1.10.2.custom.min.js'></script>

<script src='js/fullcalendar.min.js'></script>

<script type="text/javascript">

$(function() {





var date = new Date();


var d = date.getDate();


var m = date.getMonth();


var y = date.getFullYear();


$('#event').hide();


var calendar =$('#calendar').fullCalendar({


header: {


left: 'prev,next today',


center: 'title',


right: 'month,agendaWeek,agendaDay'


},


selectable:true,//选择的时候高亮





select: function(start, end, allDay) { //选中某一日期触发事件


  start = $.fullCalendar.formatDate(start,"yyyy-MM-dd HH:mm");


  var end = $.fullCalendar.formatDate(end, 'yyyy-MM-dd HH:mm');


 // $("#actionTime",window.opener.document).val(start);


 // findFilm('t');


 //$("#ticketMenuDiv").show();


 //$("#returnButt").show();


 //$("#timeList").hide();


},








buttonText:{ 


month:'月', 


agendaWeek:'周', 


agendaDay:'日', 


today:'今天' 


},


titleFormat:{ 


month:'yyyy年MMMM', 


week:"yyyy年MMMd日{'&#8212;'[yyyy年][MMM]d日}", 


day:'yyyy-MM-d dddd' 


},

 


firstDay:1,//作用周视图,默认周几开始,0星期天,1星期一。。。。默认为0


editable: true,//可编辑


timeFormat: 'H:mm',//全部视图使用这个时间样式 


axisFormat: 'H:mm',//agenda时间轴的格式


monthNamesShort:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],


monthNames:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],


dayNames:['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],


dayNamesShort:['周日','周一','周二','周三','周四','周五','周六'],


defaultEventMinutes:120,//如果事件没有结束时间,默认120分钟长度 





unselectAuto:true,//是否清除高度选择的部分。默认为true 


defaultView:'agendaWeek',//设置默认选中的为agendaWeek视图








dayClick: function(date, allDay, jsEvent, view) {//天 点击事件


//alert("日期:"+date);


//alert($('#event').show());


window.showModalDialog('event.jsp', '添加日程事件', "dialogWidth:400px;dialogHeight:200px");


//window.showModalDialog('event.jsp', '添加日程事件', "dialogWidth:900px;dialogHeight:auto;edge:sunken;status:no;help:no;resizable:yes;scroll:no");


//window.open ('event.jsp', '添加日程事件', 'height=100, width=400, top=0,left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no');


//var selDate =$.fullCalendar.formatDate(date,'yyyy-MM-dd');//格式化日期 

           
//$.fancybox({ //调用fancybox弹出层 


           //    'type':'ajax', 


           //    'href':'event.jsp?action=add&date='+selDate 

           
//}); 


},








eventClick:function(){ //时间 点击事件


alert("针对点击的事件名称:"); 


//alert("针对javascript的事件:"+jsEvent.clientX); 


//alert("视图名:"+view.name); 


//window.open(); 


//if(event.url){//当点击事件的时候,如果时间有url属性,默认跳转到url,通过return false来阻止默认行为。 


//
window.open(event.url); 


//
return false; 


//}





},





events: [


{


title: '全天计划\r\n#####\r\n写代码',


start: new Date(y, m, 1)


},


{


title: '张家界四日游',


start: new Date(y, m, d-5),


end: new Date(y, m, d-2)


},


{


title: '电话回访客户',


start: new Date(y, m, d-6, 16, 0),


allDay: false


},


{


title: '电话回访客户',


start: new Date(y, m, d+4, 16, 0),


allDay: false


},


{


title: '视频会议',


start: new Date(y, m, d, 10, 30),


allDay: false


},


{


title: '中秋放假',


start: '2013-09-19',


end: '2013-09-21'


},


{


title: '午饭',


start: new Date(y, m, d, 12, 0),


end: new Date(y, m, d, 14, 0)


},


{


title: '生日聚会',


start: new Date(y, m, d+1, 19, 0),


end: new Date(y, m, d+1, 22, 30)


},


{


title: '主页',


start: new Date(y, m, 28),


end: new Date(y, m, 29)


},


{


title: '实战训练课',


start: new Date(y, m, d+23)


}


]


});





});

</script>

</head>

<body>

<div id='event'>


<fieldset  style=" width:300px">


<legend>新增日程</legend>


<form id="add_form" action="#" method="post">


<p>日程内容:<input  type="text" class="input" name="event"></p>


<p><input type="submit" class="btn_ok" value="确定">


<input type="submit" class="btn_cancel" value="取消"></p>


</form>


</fieldset>

</div> 

<div id='calendar'></div> 

</body>

</html>今天的分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

上一篇

已是最后文章

下一篇

已是最新文章

发表回复