JQuery Calendar控件 [英] JQuery Calendar control
问题描述
我使用了JQuery完整的日历控件。
PRoblem是我将数据绑定到它。它工作正常但它不会向一个人显示数据而对其他人来说它工作正常。
我的代码： -
$（文件）.ready（function（）{
DatePicker（）;
var date = new Date（）;
var d = date.getDate（）;
var m = date.getMonth（）;
var y = date.getFullYear（）;
$（'＃calendar'）。fullCalendar（{
showTime：true，
主题：true，
defaultView：'agendaDay'，
标题：{
左：'上一个，下一个，今天'，
中心：'标题'，
右：'月，AgendaWeek，agendaDay'
}，
可编辑：false，
draggable：false，
可选：true，
selectHelper：true，
eventClick：function（calEvent，jsEvent，view）{
// if（calEvent.url）{
// window.open（calEvent.url）;
//返回false;
//}
calEvent.dblclick（函数（ev）
{
返回view.trigger（'dblclick'，this，event，ev）;
}）
}，
eventElementHandlers： function（event，eventElement）
{
var view = this;
eventElement
.click（函数（ev）
{
if（！eventElement.hasClass（'ui） -draggable-dragging'）&&
！eventElement.hasClass（'ui-resizable-resizing'））
{
return view.trigger（'eventClick'，this，event，ev）;
}
}）
.dblclick（function（ev）
{
返回view.trigger（'dblclick'，this，event，ev）;
}）
.hover（
函数（ev）
{
view.trigger（'eventMouseover'，this，event，ev）;
}，
函数（ev）
{
view.trigger（'eventMouseout'，this，event，ev）;
}
）;
}，
eventRender：function（event，element）{
element.bind（'dblclick'，function（ ）{
$（＃dialog）。dialog（'open'）;
if（calEvent.url）{
window。 open（calEvent.url）;
返回false;
}
//element.find(\".fc-event-title\").html(event.title +：+ event.description +）;
alert（'双击！'）;
}）;
}
// dayClick：function（date，allDay，jsEvent，view）{
// $（＃dialog）。dialog（'open'）;
//}
}）;
$（ '.fc-button-today span'）。click（function（）{
var action =today;
var view = $（'＃calendar'） .fullCalendar（'getView'）;
var strView = view.name;
var date = new Date（）;
var strStartDate = $ .fullCalendar.formatDate（date，'yyyy-MM-dd'）;
//window.location.href=\"../Menu/Calendar.aspx?startCaldate=+ strStartDate + & action =+ action +& view =+ strView;
}）;
$（'。fc-button-prev span'）。click （功能（）{
var action =prev;
var view = $（'＃calendar'）。fullCalendar（'getView'）;
var strView = view.name;
var loadStartDate = view.start;
var strStartDate = $ .fullCalendar.formatDate（loadStartDate，'yyyy-MM-dd'）;
var loadEndDate = view.end;
var strEndDate = $ .fullCalendar.formatDate（loadEndDate，'yyyy-MM-dd'）;
//window.location.href= ../Menu/Calendar.aspx?startCaldate=+ strStartDate +& action =+ action +& view =+ strView +& endCaldate =+ strEndDate;
}）;
$（'。fc-button-next span'）。click（function（）{
var action =next;
var view = $（'#calendar'）。fullCalendar（'getView'）;
var strView = view.name;
var load StartDate = view.start;
var strStartDate = $ .fullCalendar.formatDate（loadStartDate，'yyyy-MM-dd'）;
var loadEndDate = view.end;
var strEndDate = $ .fullCalendar.formatDate（loadEndDate，'yyyy-MM-dd'）;
//window.location.href=\"../Menu/Calendar .aspx？startCaldate =+ strStartDate +& action =+ action +& view =+ strView +& endCaldate =+ strEndDate;
}）;
$（'＃my-button'）。click（function（）{
var d = $（'＃calendar'）。fullCalendar（'getDate'）;
alert（日历的当前日期是+ d）;
}）;
$（＃dialog）。dialog（{
autoOpen：false，
身高：350，
宽度：700，
模态：真，
按钮s：{
'创建事件'：function（）{
$（this）.dialog（'close'）;
}，
取消：function（）{
$（this）.dialog（'close'）;
}
}，
关闭：function（）{
}
}）;
}）;
函数showDate（日期，月份，年份，viewName）{
$（'#calendar'）。 fullCalendar（'changeView'，viewName）;
$（'＃calendar'）。fullCalendar（'gotoDate'，年，月，日期）;
}
//用于在日历中添加db事件的javascript
函数addEvents（myid，mytitle，startDate，endDate，url，color）{
// $（'＃calendar'）。fullCalendar（'删除eEvents'，[2]）;
var source1 = {
事件：[
{
id： myid，
title：mytitle，
start：startDate，
end：endDate，
url：url，
allDay：false
}，
]，
颜色：颜色，//一个选项！
textColor：'black'//一个选项！
};
$（'＃calendar'）。 fullCalendar（'addEventSource'，source1）;
}
和后端： -
受保护的子CalTaskData（）
'加载日历事件
尝试
GlobalVar.CalUserId = txtImpersonateUser.Text
如果Request.QueryString.Count<> 0然后
Action = Request.QueryString（action）。ToString（）
type = Request.QueryString（view）。ToString（）
calStartDate = Request.QueryString（startCaldate）。ToString（）
'获取开始日期和结束日期事件
如果Action =next那么
calendarStart = Date.Parse（calStartDate）
calendarStart = DateSerial（calendarStart.Year，calendarStart。月，1）
calendarStart = calendarStart.AddMonths（-1）
calendarEnd = calendarStart.AddMonths（3）
dateStart = Format（calendarStart ，yyyy-MM-dd）
dateEnd =格式（CDate（calendarEnd），yyyy-MM-dd）
intStDt =格式（CDate（dateStart） ，yyyyMMdd）
intEnDt =格式（CDa te（dateEnd），yyyyMMdd）
ElseIf Action =prev然后
calendarStart = Date.Parse（calStartDate）
calendarStart = DateSerial（calendarStart.Year，calendarStart.Month，1）
calendarStart = calendarStart.AddMonths（-2）
calendarEnd = calendarStart.AddMonths（3）
dateStart =格式（calendarStart，yyyy-MM-dd）
dateEnd =格式（CDate（calendarEnd），yyyy-MM-dd）
intStDt =格式（CDate（dateStart），yyyyMMdd）
intEnDt =格式（CDate（dateEnd），yyyyMMdd）
结束如果
'更改日历视图
如果操作=下一步那么
如果type =month那么
calendarStart = Date.Parse （calStartDate）
calendarStart = calendarStart.AddMonths（1）
ScriptManager.RegisterClientScriptBlock（Me.Page，GetType（String），gotoNextDate，; $（function（）{showDate（'& calendarStart.Day& '，'& calendarStart.Month - 1& '，'& calendarStart.Year& '，'&类型& '）;}）;，True）
ElseIf type =agendaWeek然后
calendarStart = Date.Parse（calStartDate）
calendarStart = calendarStart.AddDays（7）
ScriptManager.RegisterClientScriptBlock（Me.Page，GetType（String），gotoNextDate，; $（function（）{showDate（'& calendarStart.Day &'，'& calendarStart.Month - 1&'，'& calendarStart.Year&'，'& type&'）;}）;，True）
ElseIf type =agendaDay然后
calendarStart = Date.Parse（calStartDate）
calendarStart = calendarStart.AddDays（1）
ScriptManager.RegisterClientScriptBlock（Me.Page，GetType（String），gotoNextDate，; $（function（）{showDate（'& calendarStart.Day&'，'& calendarStart.Month - 1&'，'& calenda rStart.Year&'，'&类型& '）;}）;，True）
结束如果
ElseIf Action =prev那么
如果type =month然后
calendarStart = Date.Parse（calStartDate）
calendarStart = calendarStart.AddMonths（-1）
ScriptManager.RegisterClientScriptBlock（Me.Page， GetType（String），gotoPrevDate，; $（function（）{showDate（'& calendarStart.Day&'，'& calendarStart.Month - 1&'，'& calendarStart .Year&'，'& type&'）;}）;，True）
ElseIf type =agendaWeek那么
calendarStart = Date.Parse（calStartDate）
calendarStart = calendarStart.AddDays（-7）
ScriptManager.RegisterClientScriptBlock（Me.Page，GetType（String），gotoPrevDate，; $（function（）{showDate（'& cal endarStart.Day& '，'& calendarStart.Month - 1& '，'& calendarStart.Year& '，'&类型& '）;}）;，True）
ElseIf type =agendaDay然后
calendarStart = Date.Parse（calStartDate）
calendarStart = calendarStart.AddDays（-1）
ScriptManager.RegisterClientScriptBlock（Me.Page，GetType（String），gotoPrevDate，; $（function（）{showDate（'& calendarStart。 Day&'，'& calendarStart.Month - 1&'，'& calendarStart.Year&'，'& type&'）;}）;，True）
结束如果
ElseIf动作=今天然后
dateStart =格式（Now.Date，yyyy-MM-01）
dateEnd =格式（Now.Date.AddMonths（1），yyyy-MM-01）
intStDt =格式（CDate（dateStart），yyyyMMdd）
intEnDt =格式（CDate（dateEnd），yyyyMMdd）
结束如果
否则
如果searchDate = True那么
Dim strtDate As Date
strtDate = txtCalDate.Text
dateStart = Format （strtDate.AddMonths（-2），yyyy-MM-01）
dateEnd =格式（strtDate.AddMonths（2），yyyy-MM-01）
intStDt =格式（CDate（dateStart），yyyyMMdd）
intEnDt =格式（CDate（dateEnd），yyyyMMdd）
否则
dateStart =格式（Now.Date.AddMonths（-2），yyyy-MM-01）
dateEnd =格式（Now.Date.AddMonths（2），yyyy-MM -01）
intStDt =格式（CDate（dateStart），yyyyMMdd）
intEnDt =格式（CDate（dateEnd），yyyyMMdd）
结束如果
结束如果
'加载所有任务事件。
loadVisit（）
loadQuote（）
loadPhoneCall（）
loadOtherTask（）
loadEmail（）
loadDemo（）
loadMeeting（）
Catch ex As Exception
最后
'MsgBox（ex.Message）
结束尝试
结束Sub
I Used JQuery full calendar control.
PRoblem is that i bind data to it. it works fine but it not show data to only one person and for others it work fine.
My code:-
$(document).ready(function() {
DatePicker();
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({
showTime: true,
theme: true,
defaultView:'agendaDay',
header: {
left: 'prev,next, today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: false,
draggable: false,
selectable: true,
selectHelper: true,
eventClick: function(calEvent, jsEvent, view) {
// if (calEvent.url) {
// window.open(calEvent.url);
// return false;
// }
calEvent.dblclick(function (ev)
{
return view.trigger('dblclick', this, event, ev);
})
},
eventElementHandlers: function (event, eventElement)
{
var view = this;
eventElement
.click(function (ev)
{
if (!eventElement.hasClass('ui-draggable-dragging') &&
!eventElement.hasClass('ui-resizable-resizing'))
{
return view.trigger('eventClick', this, event, ev);
}
})
.dblclick(function (ev)
{
return view.trigger('dblclick', this, event, ev);
})
.hover(
function (ev)
{
view.trigger('eventMouseover', this, event, ev);
},
function (ev)
{
view.trigger('eventMouseout', this, event, ev);
}
);
},
eventRender: function(event, element) {
element.bind('dblclick', function() {
$("#dialog").dialog('open');
if (calEvent.url) {
window.open(calEvent.url);
return false;
}
//element.find(".fc-event-title").html(event.title + ": " + event.description + "");
alert('double click!');
});
}
// dayClick: function (date, allDay, jsEvent, view) {
// $("#dialog").dialog('open');
// }
});
$('.fc-button-today span').click(function(){
var action="today";
var view = $('#calendar').fullCalendar('getView');
var strView = view.name;
var date = new Date();
var strStartDate = $.fullCalendar.formatDate(date, 'yyyy-MM-dd');
//window.location.href="../Menu/Calendar.aspx?startCaldate=" + strStartDate + "&action=" + action + "&view=" + strView;
});
$('.fc-button-prev span').click(function(){
var action="prev";
var view = $('#calendar').fullCalendar('getView');
var strView = view.name;
var loadStartDate = view.start;
var strStartDate = $.fullCalendar.formatDate(loadStartDate, 'yyyy-MM-dd');
var loadEndDate = view.end;
var strEndDate = $.fullCalendar.formatDate(loadEndDate, 'yyyy-MM-dd');
//window.location.href="../Menu/Calendar.aspx?startCaldate=" + strStartDate + "&action=" + action + "&view=" + strView + "&endCaldate="+ strEndDate;
});
$('.fc-button-next span').click(function(){
var action="next";
var view = $('#calendar').fullCalendar('getView');
var strView = view.name;
var loadStartDate = view.start;
var strStartDate = $.fullCalendar.formatDate(loadStartDate, 'yyyy-MM-dd');
var loadEndDate = view.end;
var strEndDate = $.fullCalendar.formatDate(loadEndDate, 'yyyy-MM-dd');
//window.location.href="../Menu/Calendar.aspx?startCaldate=" + strStartDate + "&action=" + action + "&view=" + strView + "&endCaldate="+ strEndDate;
});
$('#my-button').click(function() {
var d = $('#calendar').fullCalendar('getDate');
alert("The current date of the calendar is " + d);
});
$("#dialog").dialog({
autoOpen: false,
height: 350,
width: 700,
modal: true,
buttons: {
'Create event': function () {
$(this).dialog('close');
},
Cancel: function () {
$(this).dialog('close');
}
},
close: function () {
}
});
});
function showDate(date,month,year,viewName){
$('#calendar').fullCalendar( 'changeView', viewName );
$('#calendar').fullCalendar( 'gotoDate', year, month, date);
}
// javascript for adding db events in calendar
function addEvents(myid,mytitle, startDate, endDate, url, color) {
//$('#calendar').fullCalendar( 'removeEvents', [2]);
var source1 = {
events: [
{
id: myid,
title: mytitle,
start: startDate,
end : endDate,
url : url,
allDay: false
},
],
color: color, // an option!
textColor: 'black' // an option!
};
$('#calendar').fullCalendar('addEventSource', source1);
}
and back end:-
Protected Sub CalTaskData()
'Load Calendar Events
Try
GlobalVar.CalUserId = txtImpersonateUser.Text
If Request.QueryString.Count <> 0 Then
Action = Request.QueryString("action").ToString()
type = Request.QueryString("view").ToString()
calStartDate = Request.QueryString("startCaldate").ToString()
'get Start date and End date of events
If Action = "next" Then
calendarStart = Date.Parse(calStartDate)
calendarStart = DateSerial(calendarStart.Year, calendarStart.Month, 1)
calendarStart = calendarStart.AddMonths(-1)
calendarEnd = calendarStart.AddMonths(3)
dateStart = Format(calendarStart, "yyyy-MM-dd")
dateEnd = Format(CDate(calendarEnd), "yyyy-MM-dd")
intStDt = Format(CDate(dateStart), "yyyyMMdd")
intEnDt = Format(CDate(dateEnd), "yyyyMMdd")
ElseIf Action = "prev" Then
calendarStart = Date.Parse(calStartDate)
calendarStart = DateSerial(calendarStart.Year, calendarStart.Month, 1)
calendarStart = calendarStart.AddMonths(-2)
calendarEnd = calendarStart.AddMonths(3)
dateStart = Format(calendarStart, "yyyy-MM-dd")
dateEnd = Format(CDate(calendarEnd), "yyyy-MM-dd")
intStDt = Format(CDate(dateStart), "yyyyMMdd")
intEnDt = Format(CDate(dateEnd), "yyyyMMdd")
End If
'Changing view of calendar
If Action = "next" Then
If type = "month" Then
calendarStart = Date.Parse(calStartDate)
calendarStart = calendarStart.AddMonths(1)
ScriptManager.RegisterClientScriptBlock(Me.Page, GetType(String), "gotoNextDate", ";$(function(){showDate('" & calendarStart.Day & "','" & calendarStart.Month - 1 & "','" & calendarStart.Year & "','" & type & "');});", True)
ElseIf type = "agendaWeek" Then
calendarStart = Date.Parse(calStartDate)
calendarStart = calendarStart.AddDays(7)
ScriptManager.RegisterClientScriptBlock(Me.Page, GetType(String), "gotoNextDate", ";$(function(){showDate('" & calendarStart.Day & "','" & calendarStart.Month - 1 & "','" & calendarStart.Year & "','" & type & "');});", True)
ElseIf type = "agendaDay" Then
calendarStart = Date.Parse(calStartDate)
calendarStart = calendarStart.AddDays(1)
ScriptManager.RegisterClientScriptBlock(Me.Page, GetType(String), "gotoNextDate", ";$(function(){showDate('" & calendarStart.Day & "','" & calendarStart.Month - 1 & "','" & calendarStart.Year & "','" & type & "');});", True)
End If
ElseIf Action = "prev" Then
If type = "month" Then
calendarStart = Date.Parse(calStartDate)
calendarStart = calendarStart.AddMonths(-1)
ScriptManager.RegisterClientScriptBlock(Me.Page, GetType(String), "gotoPrevDate", ";$(function(){showDate('" & calendarStart.Day & "','" & calendarStart.Month - 1 & "','" & calendarStart.Year & "', '" & type & "');});", True)
ElseIf type = "agendaWeek" Then
calendarStart = Date.Parse(calStartDate)
calendarStart = calendarStart.AddDays(-7)
ScriptManager.RegisterClientScriptBlock(Me.Page, GetType(String), "gotoPrevDate", ";$(function(){showDate('" & calendarStart.Day & "','" & calendarStart.Month - 1 & "','" & calendarStart.Year & "','" & type & "');});", True)
ElseIf type = "agendaDay" Then
calendarStart = Date.Parse(calStartDate)
calendarStart = calendarStart.AddDays(-1)
ScriptManager.RegisterClientScriptBlock(Me.Page, GetType(String), "gotoPrevDate", ";$(function(){showDate('" & calendarStart.Day & "','" & calendarStart.Month - 1 & "','" & calendarStart.Year & "','" & type & "');});", True)
End If
ElseIf Action = "today" Then
dateStart = Format(Now.Date, "yyyy-MM-01")
dateEnd = Format(Now.Date.AddMonths(1), "yyyy-MM-01")
intStDt = Format(CDate(dateStart), "yyyyMMdd")
intEnDt = Format(CDate(dateEnd), "yyyyMMdd")
End If
Else
If searchDate = True Then
Dim strtDate As Date
strtDate = txtCalDate.Text
dateStart = Format(strtDate.AddMonths(-2), "yyyy-MM-01")
dateEnd = Format(strtDate.AddMonths(2), "yyyy-MM-01")
intStDt = Format(CDate(dateStart), "yyyyMMdd")
intEnDt = Format(CDate(dateEnd), "yyyyMMdd")
Else
dateStart = Format(Now.Date.AddMonths(-2), "yyyy-MM-01")
dateEnd = Format(Now.Date.AddMonths(2), "yyyy-MM-01")
intStDt = Format(CDate(dateStart), "yyyyMMdd")
intEnDt = Format(CDate(dateEnd), "yyyyMMdd")
End If
End If
'Load all Task Events.
loadVisit()
loadQuote()
loadPhoneCall()
loadOtherTask()
loadEmail()
loadDemo()
loadMeeting()
Catch ex As Exception
Finally
'MsgBox(ex.Message)
End Try
End Sub
推荐答案
（document）.ready（function（）{
DatePicker（）;
var date = new Date（ ）;
var d = date.getDate（）;
var m = date.getMonth（）;
var y = date.getFullYear （）;
(document).ready(function() {
DatePicker();
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
（'＃calendar'）。fullCalendar（{
showTime：true，
主题：true，
defaultVie w：'agendaDay'，
标题：{
左：'上一个，下一个，今天'，
center：'title'，
right：'month，agendaWeek，agendaDay'
}，
可编辑：false，
draggable：false，
可选：true，
selectHelper：true，
eventClick： function（calEvent，jsEvent，view）{
// if（calEvent.url）{
// window.open（calEvent.url）;
//返回false;
//}
calEvent.dblclick（函数（ev）
{
返回view.trigger（'dblclick'，this，event，ev）;
}）
}，
eventElementHandlers：function（event，eventElement）
{
var view = this;
eventElement
.click（函数（ev）
{
if（！eventElement.hasClass（'ui） -draggable-dragging'）&&
！eventElement.hasClass（'ui-resizable-resizing'））
{
return view.trigger（'eventClick'，this，event，ev）;
}
}）
.dblclick（function（ev）
{
返回view.trigger（'dblclick'，this，event，ev）;
}）
.hover（
函数（ev）
{
view.trigger（'eventMouseover'，this，event，ev）;
}，
函数（ev）
{
view.trigger（'eventMouseout'，this，event，ev）;
}
）;
}，
eventRender：function（event，element）{
element.bind（'dblclick'，function（ ）{
('#calendar').fullCalendar({
showTime: true,
theme: true,
defaultView:'agendaDay',
header: {
left: 'prev,next, today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: false,
draggable: false,
selectable: true,
selectHelper: true,
eventClick: function(calEvent, jsEvent, view) {
// if (calEvent.url) {
// window.open(calEvent.url);
// return false;
// }
calEvent.dblclick(function (ev)
{
return view.trigger('dblclick', this, event, ev);
})
},
eventElementHandlers: function (event, eventElement)
{
var view = this;
eventElement
.click(function (ev)
{
if (!eventElement.hasClass('ui-draggable-dragging') &&
!eventElement.hasClass('ui-resizable-resizing'))
{
return view.trigger('eventClick', this, event, ev);
}
})
.dblclick(function (ev)
{
return view.trigger('dblclick', this, event, ev);
})
.hover(
function (ev)
{
view.trigger('eventMouseover', this, event, ev);
},
function (ev)
{
view.trigger('eventMouseout', this, event, ev);
}
);
},
eventRender: function(event, element) {
element.bind('dblclick', function() {
（＃dialog）。dialog（'open'）;
if（calEvent.url）{
window.open（calEvent.url）;
返回false;
}
//element.find(\".fc-event-title\").html(event.title +：+ event.description +）;
alert（'双击！'）;
}）;
}
// dayClick：function（date，allDay，jsEvent，view）{
//
("#dialog").dialog('open');
if (calEvent.url) {
window.open(calEvent.url);
return false;
}
//element.find(".fc-event-title").html(event.title + ": " + event.description + "");
alert('double click!');
});
}
// dayClick: function (date, allDay, jsEvent, view) {
//
这篇关于JQuery Calendar控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
