CalVis: Creating a customized AJAX UI for your Google Calendar

Austin Chau, โปรแกรมสำหรับนักพัฒนาซอฟต์แวร์ของ Google
มิถุนายน 2008

หมายเหตุ - นี่คือโปรเจ็กต์โอเพนซอร์สที่ Googler เริ่มต้นขึ้นและไม่ใช่ไลบรารีที่รองรับอย่างเป็นทางการ เราขอเชิญทุกคนที่สนใจเข้าร่วมและมีส่วนร่วม :)

บทนำ

คุณเคยต้องการสร้างประสบการณ์การใช้งานปฏิทินที่ปรับแต่งเองในเว็บไซต์โดยใช้ข้อมูล Google ปฏิทิน แต่ไม่แน่ใจว่าจะนำเสนอข้อมูลปฏิทินในรูปแบบภาพอย่างไรใช่ไหม ดูเหมือนว่าจะมีนักพัฒนาแอปจำนวนไม่น้อยที่ประสบกับภาวะกลืนไม่เข้าคายไม่ออกเช่นนี้ แม้ว่า Google Calendar Data API จะเป็น API ของบริการเว็บที่มีประสิทธิภาพเนื่องจากช่วยให้คุณเข้าถึงข้อมูลทั้งหมดใน Google ปฏิทินได้อย่างเต็มที่ แต่ก็ยังคงเป็น API สำหรับอ่าน/เขียนข้อมูลโดยไม่มีการจัดเตรียมการแสดงข้อมูลด้วยภาพ

ในบทความนี้ ผมจะสาธิตไลบรารีตัวอย่างที่ผมเขียนขึ้นเพื่อบรรเทาปัญหานี้ ฉันได้เริ่มโปรเจ็กต์โอเพนซอร์สชื่อ Calendar Visualization (CalVis) ซึ่งมีเป้าหมายที่จะมอบอินเทอร์เฟซผู้ใช้ (UI) ที่ใช้งานง่ายและปรับแต่งได้เพื่อนำเสนอข้อมูลจากบัญชี Google ปฏิทิน CalVis ดึงข้อมูลจากบัญชี Google ปฏิทินโดยตรงผ่าน Google Calendar Data API (หมายเหตุของบรรณาธิการ: ตั้งแต่เวอร์ชัน 3 เป็นต้นไป Google ปฏิทินจะไม่ใช้รูปแบบข้อมูลของ Google อีกต่อไป) โดยใช้ไลบรารีของไคลเอ็นต์ JavaScript ของ Google Data เบื้องหลังเพื่อสื่อสารกับ Google ปฏิทิน และออกแบบมาเพื่อเพิ่มความยืดหยุ่นในการปรับแต่งให้ได้มากที่สุด

CalVis ออกแบบมาเพื่อช่วยให้นักพัฒนาแอปไม่ต้องสร้างประสบการณ์ UI ปฏิทินแบบริชมีเดียขึ้นมาใหม่ นักพัฒนาแอปสามารถใช้เป็นคอนเทนเนอร์เทมเพลตที่ปรับแต่งได้เพื่อซ้อนทับข้อมูล Google ปฏิทิน นักพัฒนาแอปสามารถใช้ CalVis เพื่อแสดงข้อมูลปฏิทินและเพื่อให้การผสานรวมกับเว็บไซต์ของตนเองในระดับที่กำหนดเองได้อย่างลึกซึ้ง ดังที่คุณจะได้ทราบ อินเทอร์เฟซที่สร้างขึ้นบน CalVis สามารถปรับแต่งได้อย่างเต็มที่ผ่าน JavaScript, HTML และ CSS นักพัฒนาแอปจะสามารถติดตั้งใช้งานอินเทอร์เฟซปฏิทินที่ปรับแต่งได้อย่างรวดเร็วและง่ายดาย พร้อมชุดคอมโพเนนต์ควบคุมปฏิทินที่จำเป็นเพื่อแสดงข้อมูลปฏิทิน

การใช้ CalVis

ขั้นตอนต่อไปนี้จะช่วยให้คุณเริ่มต้นใช้งาน CalVis ในการพัฒนาได้

ขั้นตอนที่ 1 - โหลดไลบรารีการแสดงข้อมูลปฏิทิน

ก่อนอื่นคุณต้องใส่โปรแกรมโหลดในไฟล์ HTML โปรแกรมโหลดนี้จะโหลดคลาสหลักของ CalVis แบบไดนามิก รวมถึงไลบรารีที่ขึ้นอยู่กับ CalVis (เช่น ไลบรารีไคลเอ็นต์ JavaScript ของ Google Data) 

<script src="//gcal.appspot.com/calvis/calvis.js" type="text/javascript"></script>

ขั้นตอนที่ 2 - ใช้สไตล์ชีต CSS เพื่ออธิบายแอตทริบิวต์สไตล์

ไฟล์ CSS เริ่มต้นจะสร้างรูปลักษณ์เริ่มต้นเหมือนกับตัวอย่างนี้ คุณสามารถดาวน์โหลดไฟล์ CSS นี้และปรับแต่งเพื่อให้มีรูปลักษณ์ที่แตกต่างไปจากเดิมโดยสิ้นเชิง 

<link rel="stylesheet" type="text/css" href="//gcal.appspot.com/calvis/default.css" />

ขั้นตอนที่ 3 - วางโครงสร้างภาพของอินเทอร์เฟซปฏิทินด้วย HTML

CalVis มีคอมโพเนนต์ภาพที่กำหนดไว้ล่วงหน้าหลายรายการซึ่งประกอบกันเป็นอินเทอร์เฟซปฏิทิน การจัดโครงสร้างของคอมโพเนนต์อินเทอร์เฟซเหล่านี้จะกำหนดโดยเลย์เอาต์ HTML

คอมโพเนนต์ UI ของ CalVis มีดังนี้

  • การควบคุมการเข้าสู่ระบบ (สำหรับปฏิทินส่วนตัวเท่านั้น)
    นี่คือคอมโพเนนต์ HTML ที่มีลิงก์เข้าสู่ระบบ/ออกจากระบบ
  • การควบคุมสถานะ
    นี่คือคอมโพเนนต์ HTML ที่ให้ข้อมูลสถานะหรือข้อผิดพลาด
  • การควบคุมการนำทาง
    นี่คือคอมโพเนนต์ HTML ที่แสดงผลการนำทางของปฏิทินตามมุมมองปัจจุบัน
  • ตัวควบคุมมุมมอง
    นี่คือคอมโพเนนต์ HTML ที่แสดงผลการเลือกมุมมองปฏิทิน โดยในรุ่นนี้จะมีเฉพาะมุมมองเดือนหรือสัปดาห์เท่านั้น
  • เนื้อหาปฏิทิน
    นี่คือคอมโพเนนต์ HTML ที่แสดงปฏิทินจริง โดยมีตารางกริดเพื่อกำหนดเซลล์วันที่แต่ละเซลล์
  • การแสดงผลเหตุการณ์
    นี่คือคอมโพเนนต์ HTML ที่แสดงรายละเอียดเหตุการณ์เมื่อมีการทริกเกอร์เหตุการณ์ ในรุ่นนี้รองรับเฉพาะทริกเกอร์เหตุการณ์ "คลิก" และ "วางเมาส์"

ตัวอย่างวิธีจัดเรียงคอมโพเนนต์เหล่านี้ด้วยโครงสร้างตาราง HTML พื้นฐาน 

  <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>

ขั้นตอนที่ 4 - เริ่มต้นและกำหนดค่า CalVis ด้วย JavaScript

คุณปรับแต่งลักษณะการทำงานหรือลักษณะที่ปรากฏได้โดยใช้ JavaScript โปรดทราบว่าก่อนที่จะแก้ไขออบเจ็กต์ใน JavaScript ได้ เบราว์เซอร์ต้องโหลดออบเจ็กต์นั้นก่อน ดังนั้นคุณจึงต้องรอจนกว่าไลบรารีที่ขึ้นต่อกันทั้งหมดจะโหลดด้วยโปรแกรมโหลด CalVis ซึ่งทำได้ด้วยเมธอด calvis.ready() เมธอดนี้ใช้วิธีการเรียกกลับที่จะเรียกใช้เมื่อโหลดไลบรารีทั้งหมดแล้วและ CalVis พร้อมใช้งาน 

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

ภายในฟังก์ชัน Callback คุณจะสร้างอินสแตนซ์ของออบเจ็กต์ calvis.Calendar ตอนนี้คุณต้องกำหนดรหัส CSS ต่างๆ (ซึ่งกำหนดจากเลย์เอาต์ HTML ในขั้นตอนที่ 3) เพื่อแมปกับคอมโพเนนต์ UI ของปฏิทินที่เกี่ยวข้อง 

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 ปฏิทินใด วิธีกำหนดปฏิทินสาธารณะ 

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

หากต้องการแสดงรายละเอียดกิจกรรม คุณต้องระบุเมธอด Callback เพื่อให้เมื่อมีการทริกเกอร์ข้อมูลกิจกรรมในปฏิทิน (ไม่ว่าจะด้วยเหตุการณ์ "คลิก" หรือ "วางเมาส์เหนือ") ระบบจะเรียกใช้ Callback เพื่อแสดงรายละเอียดกิจกรรม ตัวอย่างการเรียกกลับเพื่อแสดงเหตุการณ์ 

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() เพื่อแสดง UI ของปฏิทินได้โดยทำดังนี้ 
// set the default view to be "month"
calendar.setDefaultView('month');

// display the calendar
calendar.render();

ปรับแต่งการจัดรูปแบบ

หากต้องการปรับแต่งขนาด สี หรือรูปแบบของเซลล์วันที่แต่ละเซลล์ คุณเพียงแค่ต้องแก้ไขแอตทริบิวต์การจัดรูปแบบ CSS ของคลาส CSS ที่กำหนดไว้ล่วงหน้า 2-3 คลาส เช่น คุณสามารถแก้ไขความกว้างและความสูงของเซลล์วันที่แต่ละเซลล์ในมุมมองเดือนได้โดยการลบล้างคลาส CSS เริ่มต้น monthViewCell และ contentCell

สาธิต

การสาธิตนี้แสดงการใช้ CalVis กับการจัดรูปแบบเริ่มต้น

การสาธิตนี้แสดงการใช้ CalVis พร้อมการปรับแต่งเพื่อสร้างแมชอัปด้วย Google Maps และ YouTube API

มีส่วนร่วม

CalVis เป็นโปรเจ็กต์โอเพนซอร์สที่มีซอร์สโค้ดพร้อมให้ดาวน์โหลดผ่าน Subversion ใน Google Code Project Hosting

แหล่งข้อมูล