इस पेज का अनुवाद Cloud Translation API से किया गया है.

CalVis: Creating a customized AJAX UI for your Google Calendar

ऑस्टिन चाउ, Google Developer Programs
जून 2008

शुरुआती जानकारी
CalVis का इस्तेमाल करना
स्टाइल को पसंद के मुताबिक बनाना
डेमो
योगदान दें
संसाधन

ध्यान दें - यह एक ओपन सोर्स प्रोजेक्ट है. इसे Google कर्मचारी ने शुरू किया है. यह आधिकारिक तौर पर सपोर्ट की जाने वाली लाइब्रेरी नहीं है. हम उन सभी लोगों को शामिल होने और योगदान देने का न्योता देते हैं जिनकी इसमें दिलचस्पी है :)

परिचय

क्या आपको कभी Google Calendar के डेटा का इस्तेमाल करके, अपनी वेबसाइट पर कैलेंडर को पसंद के मुताबिक बनाने का मन हुआ है? हालांकि, आपको यह नहीं पता कि कैलेंडर के डेटा को विज़ुअल तरीके से कैसे दिखाया जाए? ऐसा लगता है कि कई डेवलपर को यह समस्या आ रही है. Google Calendar Data API एक बेहतरीन वेब सेवा एपीआई है. इसकी मदद से, Google Calendar के सभी डेटा को ऐक्सेस किया जा सकता है. हालांकि, यह सिर्फ़ डेटा को पढ़ने/लिखने वाला एपीआई है. इसमें डेटा विज़ुअलाइज़ेशन की सुविधा नहीं है.

इस लेख में, मैं एक सैंपल लाइब्रेरी के बारे में बताऊँगा. इसे मैंने इस समस्या को हल करने के लिए लिखा है. मैंने ओपन सोर्स प्रोजेक्ट, Calendar Visualization (CalVis) शुरू किया है. इसका मकसद, Google Calendar खाते से मिले डेटा को दिखाने के लिए, आसान और पसंद के मुताबिक बनाया जा सकने वाला यूज़र इंटरफ़ेस (यूआई) उपलब्ध कराना है. CalVis, Google Calendar Data API के ज़रिए, सीधे आपके Google Calendar खाते से डेटा लेता है. (संपादक का नोट: v3 से, Google Calendar अब Google डेटा फ़ॉर्मैट का इस्तेमाल नहीं करता.) यह Google Calendar से कम्यूनिकेट करने के लिए, Google Data JavaScript क्लाइंट लाइब्रेरी का इस्तेमाल करता है. इसे इस तरह से डिज़ाइन किया गया है कि इसे ज़्यादा से ज़्यादा मनमुताबिक बनाया जा सके.

CalVis को इस तरह से डिज़ाइन किया गया है कि डेवलपर को कैलेंडर के यूज़र इंटरफ़ेस (यूआई) को फिर से बनाने की ज़रूरत न पड़े. डेवलपर इसका इस्तेमाल, Google Calendar के डेटा को ओवरले करने के लिए, पसंद के मुताबिक बनाए जा सकने वाले टेंप्लेट कंटेनर के तौर पर कर सकते हैं. डेवलपर, CalVis का इस्तेमाल कैलेंडर डेटा को रेंडर करने के लिए कर सकते हैं. साथ ही, अपनी साइटों के साथ ज़्यादा बेहतर तरीके से इंटिग्रेट करने के लिए भी इसका इस्तेमाल किया जा सकता है. आपको पता चलेगा कि CalVis के ऊपर बनाया गया इंटरफ़ेस, JavaScript, एचटीएमएल, और सीएसएस की मदद से पूरी तरह से पसंद के मुताबिक बनाया जा सकता है. डेवलपर, कैलेंडर डेटा को रेंडर करने के लिए, कैलेंडर कंट्रोल के ज़रूरी कॉम्पोनेंट के सेट के साथ, अपनी पसंद के मुताबिक कैलेंडर इंटरफ़ेस को आसानी से और तुरंत डिप्लॉय कर पाएंगे.

CalVis का इस्तेमाल करना

यहां दिए गए तरीके से, डेवलपमेंट के लिए CalVis का इस्तेमाल शुरू किया जा सकता है.

पहला चरण - Calendar Visualization लाइब्रेरी लोड करना

सबसे पहले, आपको अपनी एचटीएमएल फ़ाइल में लोडर शामिल करना होगा. यह लोडर, CalVis की मुख्य क्लास के साथ-साथ उससे जुड़ी लाइब्रेरी (जैसे कि Google Data 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" />

तीसरा चरण - एचटीएमएल की मदद से, कैलेंडर इंटरफ़ेस का विज़ुअल स्ट्रक्चर तैयार करना

CalVis में पहले से तय किए गए कई विज़ुअल कॉम्पोनेंट होते हैं, जिनसे कैलेंडर इंटरफ़ेस बनता है. इन इंटरफ़ेस कॉम्पोनेंट का स्ट्रक्चरल अरेंजमेंट, आपके एचटीएमएल लेआउट से तय होता है.

CalVis के यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट ये हैं:

लॉगिन कंट्रोल (सिर्फ़ निजी कैलेंडर के लिए)
यह एचटीएमएल कॉम्पोनेंट है. यह लॉगिन/लॉगआउट लिंक उपलब्ध कराता है.
स्टेटस कंट्रोल
यह एचटीएमएल कॉम्पोनेंट है. यह स्टेटस की जानकारी या गड़बड़ियों के बारे में बताता है.
नेविगेशन कंट्रोल
यह एचटीएमएल कॉम्पोनेंट है. यह मौजूदा व्यू के हिसाब से कैलेंडर नेविगेशन को रेंडर करता है.
व्यू कंट्रोल
यह एचटीएमएल कॉम्पोनेंट है, जो कैलेंडर व्यू चुनने की सुविधा देता है. इस रिलीज़ में, सिर्फ़ महीने या हफ़्ते के व्यू उपलब्ध हैं.
कैलेंडर बॉडी
यह एचटीएमएल कॉम्पोनेंट है, जो असल कैलेंडर को रेंडर करता है. इसमें हर तारीख के लिए अलग-अलग सेल होते हैं.
इवेंट डिसप्ले
यह एचटीएमएल कॉम्पोनेंट है. यह इवेंट ट्रिगर होने पर, इवेंट की जानकारी रेंडर करता है. इस रिलीज़ में, सिर्फ़ "क्लिक" और "माउस घुमाना" इवेंट ट्रिगर काम करता है.

बेसिक एचटीएमएल टेबल स्ट्रक्चर का इस्तेमाल करके, इन कॉम्पोनेंट को विज़ुअल तौर पर व्यवस्थित करने का उदाहरण -

  <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.ready() तरीके से किया जाता है. यह तरीका, कॉलबैक का इस्तेमाल करता है. जब सभी लाइब्रेरी लोड हो जाती हैं और CalVis इस्तेमाल के लिए तैयार हो जाता है, तब इस कॉलबैक को शुरू किया जाता है.

window.onload = function() {
  calvis.ready(callback);
}

कॉलबैक फ़ंक्शन के अंदर, calvis.Calendar ऑब्जेक्ट का इंस्टेंस बनाया जाएगा. अब आपको अलग-अलग सीएसएस आईडी असाइन करने होंगे. ये आईडी, तीसरे चरण में एचटीएमएल लेआउट से तय किए जाते हैं, ताकि उन्हें कैलेंडर के यूज़र इंटरफ़ेस (यूआई) के कॉम्पोनेंट से मैप किया जा सके.

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');

अब यह तय किया जा सकता है कि CalVis को किस Google Calendar खाते से डेटा पुल करना चाहिए. किसी सार्वजनिक कैलेंडर को तय करने के लिए -

// set the calenar to pull data from this Google Calendar account
calendar.setPublicCalendar(calId);

निजी कैलेंडर के बारे में बताने के लिए, आपको उस एचटीएमएल कॉम्पोनेंट के बारे में भी बताना होगा जो लॉगिन बटन से जुड़ा है -

// 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('');
}

आखिर में, कैलेंडर का डिफ़ॉल्ट व्यू ('महीने' या 'हफ़्ते' के हिसाब से व्यू) सेट किया जा सकता है. साथ ही, कैलेंडर का यूज़र इंटरफ़ेस (यूआई) दिखाने के लिए, render() तरीके का इस्तेमाल किया जा सकता है -

// set the default view to be "month"
calendar.setDefaultView('month');

// display the calendar
calendar.render();

स्टाइल को पसंद के मुताबिक बनाना

किसी तारीख की सेल के साइज़, रंग या स्टाइल को पसंद के मुताबिक बनाने के लिए, आपको पहले से तय की गई कुछ सीएसएस क्लास के सीएसएस स्टाइलिंग एट्रिब्यूट में बदलाव करना होगा. उदाहरण के लिए, monthViewCell और contentCell की डिफ़ॉल्ट सीएसएस क्लास को बदलकर, महीने के व्यू में हर तारीख के सेल की चौड़ाई और ऊंचाई में बदलाव किया जा सकता है.

डेमो

इस डेमो में, डिफ़ॉल्ट स्टाइलिंग के साथ CalVis का इस्तेमाल करने का तरीका दिखाया गया है.

इस डेमो में, CalVis का इस्तेमाल करके Google Maps और YouTube API के साथ मैश-अप बनाने का तरीका दिखाया गया है. इसमें CalVis को अपनी पसंद के मुताबिक बनाया गया है.

योगदान दें

CalVis एक ओपन सोर्स प्रोजेक्ट है. इसका सोर्स कोड, Google Code Project Hosting पर Subversion के ज़रिए डाउनलोड करने के लिए उपलब्ध है.