मैं एक कैलेंडर का उपयोग करके एक समाधान मिल गया।
इस कैलेंडर में फ्रीब्यूसी नामक एक सुविधा है। यह व्यस्त और नि: शुल्क टाइमलॉट श्रेणियों के लिए उपयोग किया जाने वाला है, लेकिन स्रोत कोड को थोड़ा सा बदलकर, मैं टाइम्सलॉट श्रेणियों में पृष्ठभूमि रंग जोड़ सकता हूं। मैं विधि freeBusyRender इस प्रकार बदल दिया है:
freeBusyRender: function(freeBusy, $freeBusy, calendar) {
if(freeBusy.free == 't_red') {
$freeBusy.css("backgroundColor", "red");
} else if(freeBusy.free == 't_green') {
$freeBusy.css("backgroundColor", "green");
} else if(freeBusy.free == 't_blue') {
$freeBusy.css("backgroundColor", "blue");
} else if(freeBusy.free == 't_black') {
$freeBusy.css("backgroundColor", "black");
}
$freeBusy.addClass('free-busy-free');
return $freeBusy;
}
फिर, इस प्रकार मैं कैलेंडर को प्रारंभ कर सकते हैं:
(function($) {
d = new Date();
d.setDate(d.getDate() - (d.getDay() - 3));
year = d.getFullYear();
month = d.getMonth();
day = d.getDate();
var eventData2 = {
options: {
timeslotsPerHour: 4,
timeslotHeight: 12,
defaultFreeBusy: { free: true }
},
events: [
{ 'id': 1, 'start': new Date(year, month, day, 12), 'end': new Date(year, month, day, 13, 00), 'title': 'Lunch with Sarah'},
{ 'id': 2, 'start': new Date(year, month, day, 14), 'end': new Date(year, month, day, 14, 40), 'title': 'Team Meeting'},
{ 'id': 3, 'start': new Date(year, month, day + 1, 18), 'end': new Date(year, month, day + 1, 18, 40), 'title': 'Meet with Joe'},
{ 'id': 4, 'start': new Date(year, month, day - 1, 8), 'end': new Date(year, month, day - 1, 9, 20), 'title': 'Coffee with Alison'},
{ 'id': 5, 'start': new Date(year, month, day + 1, 14), 'end': new Date(year, month, day + 1, 15, 00), 'title': 'Product showcase'}
],
freebusys: [
{ 'start': new Date(year, month, day - 1, 8), 'end': new Date(year, month, day - 1, 18), 'free': 't_red'},
{ 'start': new Date(year, month, day, 8), 'end': new Date(year, month, day + 0, 18), 'free': 't_green' },
{ 'start': new Date(year, month, day + 1, 8), 'end': new Date(year, month, day + 1, 18), 'free': 't_blue' },
{ 'start': new Date(year, month, day + 2, 14), 'end': new Date(year, month, day + 2, 18), 'free': 't_black'},
{ 'start': new Date(year, month, day + 3, 8), 'end': new Date(year, month, day + 3, 18), 'free': 't_red' }
]
};
$(document).ready(function() {
var $calendar = $('#calendar').weekCalendar({
allowCalEventOverlap: true,
overlapEventsSeparate: true,
totalEventsWidthPercentInOneColumn: 95,
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) {
calEvent.id = calEvent.userId + '_' + calEvent.start.getTime();
},
data: function(start, end, callback) {
callback(eventData2);
},
displayFreeBusys: true,
daysToShow: 7,
switchDisplay: { '1 day': 1, '3 next days': 3, 'work week': 5, 'full week': 7 },
headerSeparator: ' ',
useShortDayNames: true
});
});
})(jQuery);
जो मेरा पीछा परिणाम देता है:
मैं इस शर्त सुधारा जा सकता है; मुझे लगता है कि मैंने फ्रीबसी फीचर तोड़ दिया, लेकिन मुझे इसकी आवश्यकता नहीं है।
अभी तक कोई बेहतर विचार नहीं है; मैंने ब्लैक टाइम्सलॉट्स को जोड़ा और घटनाओं को पकड़ने की योजना बनाई जब कोई समय-समय पर बनाता है या विस्तार करता है और उन्हें काले (अक्षम) स्लॉट के साथ ओवरलैप करने की अनुमति देता है। अगर मुझे एक बेहतर तरीका मिल जाए, तो मैं निश्चित रूप से इसे यहां पोस्ट करूंगा। वर्तमान समाधान के बारे में – Tom
। सप्ताह के दृश्य में जब आप एक समय स्लॉट अक्षम करते हैं, तो यह पूरे सप्ताह के लिए अक्षम हो जाता है। आप 6/8/2012 के लिए केवल 6 am-7am अक्षम नहीं कर सकते हैं। सही ? –
हाँ आप कर सकते हैं; मैं सिर्फ एक दी गई अवधि के लिए टाइम्सलॉट बना देता हूं (यदि मुझे न्यूनतम गलती नहीं है तो 15 मिनट है)। आगे, यदि कोई इसके साथ टाइमलॉट ओवरलैपिंग करने का प्रयास करता है, तो मैं इसे ईवेंट हैंडलर में अस्वीकार कर दूंगा। मैं सर्वर की तरफ जांचने की योजना बना रहा हूं और इसके लिए AJAX का उपयोग कर रहा हूं। जैसा कि आपने शायद देखा है; यह परियोजना अभी तक समाप्त नहीं हुई है, टीबीएच में मेरे हाथों में कुछ देरी है, लेकिन जल्द ही मैं आपको जो कुछ भी बता रहा हूं उसे लागू कर दूंगा; मैंने अवधारणा के प्रमाण के रूप में पहले ही कुछ गंभीर परीक्षण किया है। – Tom