why it is not working in asp.net mvc5
93 views
Skip to first unread message
Muhammad Naveed
Sep 23, 2016, 2:09:25 AM9/23/16
to jquery week calendar
i am trying to use it in my asp.net mvc5 project, but it is not showing me the anything
this is the script
<script type="text/javascript">
(function($) {
var d = new Date();
d.setDate(d.getDate() - d.getDay());
var year = d.getFullYear();
var month = d.getMonth();
var day = d.getDate();
var eventData1 = {
options: {
timeslotsPerHour: 4,
timeslotHeight: 20,
defaultFreeBusy: {free: true}
},
events : [
{'id':1, 'start': new Date(year, month, day, 12), 'end': new Date(year, month, day, 13, 30), 'title': 'Lunch with Mike', userId: 0},
{'id':2, 'start': new Date(year, month, day, 14), 'end': new Date(year, month, day, 14, 45), 'title': 'Dev Meeting', userId: 1},
{'id':3, 'start': new Date(year, month, day+1, 18), 'end': new Date(year, month, day+1, 18, 45), 'title': 'Hair cut', userId: 1},
{'id':4, 'start': new Date(year, month, day+2, 8), 'end': new Date(year, month, day+2, 9, 30), 'title': 'Team breakfast', userId: 0},
{'id':5, 'start': new Date(year, month, day+1, 14), 'end': new Date(year, month, day+1, 15), 'title': 'Product showcase', userId: 1}
],
freebusys: [
{'start': new Date(year, month, day), 'end': new Date(year, month, day+3), 'free': false, userId: [0,1,2,3]},
{'start': new Date(year, month, day, 8), 'end': new Date(year, month, day, 12), 'free': true, userId: [0,1,2,3]},
{'start': new Date(year, month, day+1, 8), 'end': new Date(year, month, day+1, 12), 'free': true, userId: [0,1,2,3]},
{'start': new Date(year, month, day+2, 8), 'end': new Date(year, month, day+2, 12), 'free': true, userId: [0,1,2,3]},
{'start': new Date(year, month, day+1, 14), 'end': new Date(year, month, day+1, 18), 'free': true, userId: [0,1,2,3]},
{'start': new Date(year, month, day+2, 8), 'end': new Date(year, month, day+2, 12), 'free': true, userId: [0,3]},
{'start': new Date(year, month, day+2, 14), 'end': new Date(year, month, day+2, 18), 'free': true, userId: 1}
]
};
d = new Date();
d.setDate(d.getDate() -(d.getDay() - 3));
year = d.getFullYear();
month = d.getMonth();
day = d.getDate();
var eventData2 = {
options: {
timeslotsPerHour: 3,
timeslotHeight: 30,
defaultFreeBusy: {free: false}
},
events : [
{'id':1, 'start': new Date(year, month, day, 12), 'end': new Date(year, month, day, 13, 00), 'title': 'Lunch with Sarah', userId: [1, 2]},
{'id':2, 'start': new Date(year, month, day, 14), 'end': new Date(year, month, day, 14, 40), 'title': 'Team Meeting', userId: 0},
{'id':3, 'start': new Date(year, month, day+1, 18), 'end': new Date(year, month, day+1, 18, 40), 'title': 'Meet with Joe', userId: 1},
{'id':4, 'start': new Date(year, month, day-1, 8), 'end': new Date(year, month, day-1, 9, 20), 'title': 'Coffee with Alison', userId: 1},
{'id':5, 'start': new Date(year, month, day+1, 14), 'end': new Date(year, month, day+1, 15, 00), 'title': 'Product showcase', userId: 0}
],
freebusys: [
{'start': new Date(year, month, day-1, 8), 'end': new Date(year, month, day-1, 18), 'free': true, userId: [0,1,2,3]},
{'start': new Date(year, month, day, 8), 'end': new Date(year, month, day+0, 18), 'free': true, userId: [0,1,2,3]},
{'start': new Date(year, month, day+1, 8), 'end': new Date(year, month, day+1, 18), 'free': true, userId: [0,3]},
{'start': new Date(year, month, day+2, 14), 'end': new Date(year, month, day+2, 18), 'free': true, userId: 1}
]
};
function updateMessage() {
var dataSource = $('#data_source').val();
$('#message').fadeOut(function() {
if (dataSource === '1') {
$('#message').text('Displaying event data set 1 with timeslots per hour of 4 and timeslot height of 20px. Moreover, the calendar is free by default.');
} else if(dataSource === '2') {
$('#message').text('Displaying event data set 2 with timeslots per hour of 3 and timeslot height of 30px. Moreover, the calendar is busy by default.');
} else {
$('#message').text('Displaying no events.');
}
$(this).fadeIn();
});
}
$(document).ready(function() {
var $calendar = $("#calendar").weekCalendar({
timeslotsPerHour: 4,
scrollToHourMillis : 0,
height: function($calendar){
return $(window).height() - $('h1').outerHeight(true);
},
eventRender : function(calEvent, $event) {
if (calEvent.end.getTime() < new Date().getTime()) {
$event.css('backgroundColor', '#aaa');
$event.find('.wc-time').css({
backgroundColor: '#999',
border:'1px solid #888'
});
}
},
eventNew : function(calEvent, $event, FreeBusyManager, calendar) {
var isFree = true;
$.each(FreeBusyManager.getFreeBusys(calEvent.start, calEvent.end), function() {
if (
this.getStart().getTime() != calEvent.end.getTime()
&& this.getEnd().getTime() != calEvent.start.getTime()
&& !this.getOption('free')
){
isFree = false;
return false;
}
});
if (!isFree) {
alert('looks like you tried to add an event on busy part !');
$(calendar).weekCalendar('removeEvent',calEvent.id);
return false;
}
alert('You\'ve added a new event. You would capture this event, add the logic for creating a new event with your own fields, data and whatever backend persistence you require.');
calEvent.id = calEvent.userId +'_'+ calEvent.start.getTime();
$(calendar).weekCalendar('updateFreeBusy', {
userId: calEvent.userId,
start: calEvent.start,
end: calEvent.end,
free:false
});
},
data: function(start, end, callback) {
var dataSource = $('#data_source').val();
if (dataSource === '1') {
callback(eventData1);
} else if(dataSource === '2') {
callback(eventData2);
} else {
callback({
options: {
defaultFreeBusy: {
free:true
}
},
events: []
});
}
},
users: ['user 1', 'user 2', 'long username', 'user 4'],
showAsSeparateUser: true,
displayOddEven: true,
displayFreeBusys: true,
daysToShow: 7,
switchDisplay: {'1 day': 1, '3 next days': 3, 'work week': 5, 'full week': 7},
headerSeparator: ' ',
useShortDayNames: true,
// I18N
firstDayOfWeek: $.datepicker.regional['fr'].firstDay,
shortDays: $.datepicker.regional['fr'].dayNamesShort,
longDays: $.datepicker.regional['fr'].dayNames,
shortMonths: $.datepicker.regional['fr'].monthNamesShort,
longMonths: $.datepicker.regional['fr'].monthNames,
dateFormat: 'd F y'
});
$('#data_source').change(function() {
$calendar.weekCalendar('refresh');
updateMessage();
});
updateMessage();
});
});
</script>
this is where i want to display
<div id="tableWrapper">
<div id="calendar"></div>
</div>
but it is not showing anything just blank area of tableWrapper
please guide me
Thanks
Reply all
Reply to author
Forward
0 new messages