CalVis: สร้าง AJAX UI ที่กําหนดเองสําหรับ Google ปฏิทิน

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

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

บทนำ

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

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

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

การใช้ CalVis

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

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

ก่อนอื่นคุณจะต้องใส่ตัวโหลดในไฟล์ HTML ตัวโหลดนี้จะโหลดคลาสหลักของ 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 ที่แสดงรายละเอียดเหตุการณ์เมื่อทริกเกอร์เหตุการณ์ รุ่นนี้รองรับเฉพาะทริกเกอร์เหตุการณ์ "click" และ "mouseover" เท่านั้น

ตัวอย่างวิธีจัดเรียงองค์ประกอบเหล่านี้ด้วยโครงสร้างตาราง 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);
}

ภายในฟังก์ชันเรียกกลับ คุณจะต้องสร้างอินสแตนซ์ของออบเจ็กต์ 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');

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

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 รายเดือนสําหรับViewCell และ ContentCell

เดโม

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

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

มีส่วนร่วม

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

ทรัพยากร