जून 2008
नोट - यह Googler के ज़रिए शुरू किया गया एक ओपन सोर्स प्रोजेक्ट है, जो गैर-ज़रूरी तरीके से काम करने वाली लाइब्रेरी नहीं है. हम उन सभी को न्योता देते हैं जो इसमें शामिल होना चाहते हैं और योगदान देना चाहते हैं :)
सुविधा के बारे में जानकारी
क्या आपने कभी भी Google कैलेंडर डेटा का उपयोग करके अपनी वेबसाइट पर एक कस्टमाइज़ किया गया कैलेंडर अनुभव बनाना चाहते हैं, लेकिन इस बारे में पूरी तरह से तैयार नहीं हैं कि कैलेंडर डेटा को विज़ुअल रूप से कैसे प्रस्तुत करें? इस समस्या को हल करने वाले डेवलपर की संख्या अच्छी है. Google Calendar का Data API, एक बेहतरीन वेब सर्विस एपीआई है. इसकी मदद से, Google Calendar के अपने सभी डेटा को बेहतर तरीके से इस्तेमाल किया जा सकता है. हालांकि, यह सिर्फ़ पढ़ने या लिखने के लिए डेटा एपीआई है, लेकिन इससे डेटा विज़ुअलाइज़ेशन की सुविधा नहीं मिलती.
इस लेख में, मैं इस समस्या को कम करने के लिए लिखी गई एक सैंपल लाइब्रेरी दिखाने जा रहा हूं. मैंने ओपन सोर्स प्रोजेक्ट, कैलेंडर विज़ुअलाइज़ेशन (CalVis) शुरू किया. इसका लक्ष्य, Google Calendar खाते से डेटा दिखाने के लिए आसान और पसंद के मुताबिक बनाया गया यूज़र इंटरफ़ेस (यूआई) उपलब्ध कराना है. CalVis, Google Calendar Data API की मदद से, सीधे आपके Google Calendar खाते से डेटा लेता है. (एडिटर की जानकारी: v3 में Google Calendar, अब Google डेटा फ़ॉर्मैट का इस्तेमाल नहीं करता.) यह Google Calendar के साथ संपर्क बनाने के लिए Google डेटा JavaScript क्लाइंट लाइब्रेरी का इस्तेमाल करता है. इसे अपनी पसंद के मुताबिक बनाने के लिए भी डिज़ाइन किया गया है.
CalVis को इस तरह डिज़ाइन किया गया है कि डेवलपर को कैलेंडर का बेहतर यूज़र इंटरफ़ेस (यूआई) बनाने के लिए दोबारा मेहनत करनी पड़े. डेवलपर, Google Calendar डेटा को ओवरले करने के लिए, इसका इस्तेमाल कस्टम टेंप्लेट कंटेनर के तौर पर कर सकते हैं. डेवलपर, Calendar का डेटा रेंडर करने के लिए CalVis का इस्तेमाल कर सकते हैं. साथ ही, इसकी मदद से, वे अपनी साइटों के साथ इंटिग्रेशन को बेहतर तरीके से इंटिग्रेट कर सकते हैं. जैसे-जैसे आप सीखते जाएंगे, CalVis के ऊपर बनाया गया इंटरफ़ेस JavaScript, HTML और CSS के माध्यम से पूरी तरह से कस्टमाइज़ किया जा सकता है. डेवलपर, कैलेंडर डेटा को रेंडर करने के लिए ज़रूरी कैलेंडर कंट्रोल कॉम्पोनेंट के एक सेट के साथ, अपनी पसंद के मुताबिक बनाए गए कैलेंडर इंटरफ़ेस को तुरंत और आसानी से डिप्लॉय कर सकेंगे.
CalVis का इस्तेमाल करना
अपने डेवलपमेंट के लिए CalVis का इस्तेमाल शुरू करने के लिए, यह तरीका अपनाएं.
पहला चरण - कैलेंडर विज़ुअलाइज़ेशन लाइब्रेरी लोड करना
पहले आपको लोडर को अपनी HTML फ़ाइल में शामिल करना होगा. यह लोडर डाइनैमिक तौर पर CalVis की मुख्य क्लास लोड करता है. साथ ही, यह डिपेंडेंसी की लाइब्रेरी, जैसे कि Google डेटा JavaScript क्लाइंट लाइब्रेरी भी लोड करता है.
<script src="//gcal.appspot.com/calvis/calvis.js" type="text/javascript"></script>
दूसरा चरण - स्टाइल एट्रिब्यूट के बारे में बताने के लिए, सीएसएस स्टाइलशीट का इस्तेमाल करें.
डिफ़ॉल्ट सीएसएस फ़ाइल, इस उदाहरण की तरह ही डिफ़ॉल्ट लुक और स्टाइल देगी. इस सीएसएस फ़ाइल को डाउनलोड करके, पसंद के मुताबिक बनाया जा सकता है.
<link rel="stylesheet" type="text/css" href="//gcal.appspot.com/calvis/default.css" />
चरण 3 - HTML से कैलेंडर इंटरफ़ेस की विज़ुअल संरचना तैयार करें
CalVis में कैलेंडर की मदद से, पहले से तय किए गए कई विज़ुअल कॉम्पोनेंट होते हैं. इन इंटरफ़ेस कॉम्पोनेंट के स्ट्रक्चर की व्यवस्था, आपके एचटीएमएल लेआउट से तय होती है.
KalVis के यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट ये हैं:
-
लॉगिन कंट्रोल (सिर्फ़ निजी कैलेंडर के लिए)
यह एचटीएमएल कॉम्पोनेंट है, जो लॉगिन/लॉग आउट का लिंक देता है.
-
स्थिति नियंत्रण
यह एचटीएमएल घटक है जो स्थिति की जानकारी या गड़बड़ियां देता है.
-
नेविगेशन कंट्रोल
यह ऐसा एचटीएमएल कॉम्पोनेंट है जो मौजूदा व्यू के हिसाब से कैलेंडर नेविगेशन को रेंडर करता है.
-
व्यू कंट्रोल
यह एचटीएमएल कॉम्पोनेंट है, जो कैलेंडर व्यू चुनने को रेंडर करता है. इस रिलीज़ में सिर्फ़ महीने या हफ़्ते के व्यू उपलब्ध होते हैं.
-
कैलेंडर का मुख्य हिस्सा
यह एचटीएमएल कॉम्पोनेंट होता है, जो असल कैलेंडर को रेंडर करता है. अलग-अलग तारीख वाले सेल तय करने के लिए, ग्रिड का इस्तेमाल किया जाता है.
-
इवेंट डिसप्ले
यह एचटीएमएल कॉम्पोनेंट होता है, जो इवेंट ट्रिगर होने पर इवेंट की जानकारी रेंडर करता है. इस रिलीज़ में सिर्फ़ "क्लिक" और "माउसओवर" इवेंट ट्रिगर काम करता है.
बुनियादी एचटीएमएल टेबल के स्ट्रक्चर का इस्तेमाल करके, इन कॉम्पोनेंट को विज़ुअल तौर पर व्यवस्थित करने का उदाहरण -
<table style="width: 800px;">
<tr>
<td colspan="2" valign="top">
<div style="float: left;" id="loginControlDiv"></div>
<div style="float: right;" id="statusControlDiv"></div>
</td>
</tr>
<tr>
<td valign="top">
<div id="navControlDiv"></div>
</td>
<td valign="top" align="right">
<div id="viewControlDiv"></div>
</td>
</tr>
<tr>
<td colspan="2" valign="top">
<div id="calendarBodyDiv"></div>
</td>
</tr>
<tr>
<td colspan="2" valign="top">
<div id="eventDisplayDiv"></div>
</td>
</tr>
</table>
|
|
चौथा चरण - JavaScript से CalVis को शुरू करें और उसे कॉन्फ़िगर करें
आप JavaScript का इस्तेमाल करके किसी भी व्यवहार या दिखावट को अपनी पसंद के मुताबिक बना सकते हैं. ध्यान रखें कि JavaScript में किसी ऑब्जेक्ट को संशोधित करने से पहले, उसे पहले ब्राउज़र द्वारा लोड किया जाना चाहिए, ताकि सभी काल्पनिक लाइब्रेरी CalVis लोडर में लोड होने तक आपको प्रतीक्षा करनी पड़े, ऐसा कैलविस.तैयार() विधि से किया जाता है. यह तरीका एक कॉलबैक मैथड है, जिसे सभी लाइब्रेरी लोड होने और CalVis इस्तेमाल के लिए तैयार होने पर लागू किया जाएगा.
window.onload = function() {
calvis.ready(callback);
}
कॉलबैक फ़ंक्शन के अंदर, आपको कैल्विस (कैलेंडर) ऑब्जेक्ट का एक इंस्टेंस मिलता है. अब आपको कैलेंडर के यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट से मैप करने के लिए, कई सीएसएस आईडी (चरण 3 में एचटीएमएल लेआउट से इनकी जानकारी दी गई है) असाइन करनी होगी.
var calId = 'developer-calendar@google.com';
var calendar = new calvis.Calendar();
// set the CSS IDs for various visual components for the calendar container
calendar.setCalendarBody('calendarBodyDiv');
calendar.setStatusControl('statusControlDiv');
calendar.setNavControl('navControlDiv');
calendar.setViewControl('viewControlDiv');
अब आप तय कर सकते हैं कि किस Google Calendar खाते से डेटा को निकालना है. सार्वजनिक कैलेंडर तय करने के लिए -
// set the calenar to pull data from this Google Calendar account calendar.setPublicCalendar(calId);
निजी कैलेंडर दर्ज करने के लिए, आपको लॉगिन बटन से संबंधित HTML घटक को भी तय करना होगा -
// set the calenar to pull data from this Google Calendar account
calendar.setPrivateCalendar(calId);
calendar.setLoginControl('loginControlDiv');
इवेंट की जानकारी दिखाने के लिए, आपको कॉलबैक का तरीका उपलब्ध कराना होगा, ताकि कैलेंडर पर इवेंट की सूची ट्रिगर होने पर ('क्लिक' या 'माउसओवर' इवेंट) कॉलबैक को इवेंट की जानकारी दिखाने के लिए इस्तेमाल किया जाए. एक इवेंट डिसप्ले कॉलबैक का उदाहरण-
calendar.setEventCallback('click', displayEvent);
function displayEvent(event) {
var title = event.getTitle().getText();
var date = event.getTimes()[0].getStartTime().getDate();
var content = event.getContent().getText();
var eventHtml = [;
eventHtml.push(date.toString());
eventHtml.push('<br><br>');
eventHtml.push('<b>Event title:</b> ');
eventHtml.push(title);
eventHtml.push('<br>');
eventHtml.push('<br>');
eventHtml.push('<b>Description:</b>');
eventHtml.push('<p style="font-size: 11px;">');
eventHtml.push(content);
eventHtml.push('</p>');
eventHtml.push('<br>');
document.getElementById('eventDisplayDiv').innerHTML = eventHtml.join('');
}
आखिर में, कैलेंडर का डिफ़ॉल्ट व्यू सेट किया जा सकता है ('महीने' या 'हफ़्ते' का व्यू) और कैलेंडर यूज़र इंटरफ़ेस (यूआई) दिखाने के लिए, रेंडर() तरीके को शुरू किया जा सकता है -
// set the default view to be "month"
calendar.setDefaultView('month');
// display the calendar
calendar.render();
स्टाइलिंग को पसंद के मुताबिक बनाएं
किसी एक तारीख वाले सेल के आकार, रंग या शैली को पसंद के मुताबिक बनाने के लिए, आपको पहले से तय की गई कुछ सीएसएस क्लास की सीएसएस शैली विशेषताओं में बदलाव करना होगा. उदाहरण के लिए, आप डिफ़ॉल्ट सीएसएस क्लास monthViewCell और contentCell को ओवरराइड करके अपने महीने के व्यू में हर तारीख सेल की चौड़ाई और ऊंचाई बदल सकते हैं.
डेमो
यह डेमो, डिफ़ॉल्ट स्टाइल के साथ CalVis का इस्तेमाल करने के बारे में बताता है.
यह डेमो, Google Maps और YouTube API के साथ मैश-अप बनाने के लिए, बदलाव के साथ CalVis का इस्तेमाल करने के बारे में बताता है.
योगदान दें
CalVis एक ओपन सोर्स प्रोजेक्ट है, जिसका सोर्स कोड Google Code Project Hosting पर सबवर्ज़न के माध्यम से डाउनलोड करने के लिए उपलब्ध है.
रिसॉर्स