CalVis: ایجاد یک رابط کاربری AJAX سفارشی برای تقویم Google شما

آستین چاو، برنامه‌های توسعه‌دهنده Google
ژوئن 2008

توجه - این یک پروژه منبع باز است که توسط یک کارمند Google شروع شده است و یک کتابخانه رسمی پشتیبانی نمی شود. از همه علاقه مندان دعوت می کنیم که بپیوندند و مشارکت کنند :)

معرفی

آیا تا به حال خواسته اید با استفاده از داده های تقویم گوگل یک تجربه تقویم سفارشی در وب سایت خود ایجاد کنید اما کاملاً مطمئن نیستید که چگونه داده های تقویم را به صورت بصری ارائه دهید؟ به نظر می رسد تعداد خوبی از توسعه دهندگان وجود دارند که با این معضل مشترک هستند. در حالی که Google Calendar Data API یک API سرویس وب قدرتمند است زیرا به شما امکان می‌دهد از غنای تمام داده‌های Google Calendar خود بهره ببرید، اما همچنان یک API داده خواندن/نوشتن خالص بدون پیش‌بینی برای تجسم داده‌ها است.

در این مقاله، من قصد دارم یک کتابخانه نمونه را که برای کاهش این مشکل نوشته ام، نشان دهم. من پروژه منبع باز، تجسم تقویم ( CalVis ) را شروع کردم که هدف آن ارائه یک رابط کاربری (UI) آسان و قابل تنظیم برای ارائه داده ها از حساب Google Calendar است. CalVis داده‌ها را مستقیماً از حساب Google Calendar شما از طریق Google Calendar Data API می‌گیرد. ( توجه ویرایشگر: از نسخه 3، Google Calendar دیگر از قالب Google Data استفاده نمی کند.) از کتابخانه سرویس گیرنده Google Data JavaScript در زیر برای برقراری ارتباط با Google Calendar استفاده می کند و برای به حداکثر رساندن انعطاف پذیری در سفارشی سازی طراحی شده است.

CalVis طراحی شده است تا توسعه دهندگان را از ایجاد مجدد تجربه UI تقویم غنی دور نگه دارد. توسعه دهندگان می توانند از آن به عنوان ظرف قالب قابل تنظیم برای همپوشانی داده های تقویم Google استفاده کنند. توسعه دهندگان می توانند از CalVis برای ارائه داده های تقویم و دستیابی به سطح عمیقی از یکپارچگی سفارشی شده با سایت های خود استفاده کنند. همانطور که یاد خواهید گرفت، رابطی که در بالای CalVis ساخته شده است، کاملاً از طریق جاوا اسکریپت، HTML و CSS قابل تنظیم است. توسعه دهندگان می توانند به سرعت و به راحتی یک رابط تقویم سفارشی شده با مجموعه ای از اجزای ضروری کنترل تقویم را برای ارائه داده های تقویم مستقر کنند.

با استفاده از CalVis

مراحل زیر به شما کمک می کند تا استفاده از CalVis را برای توسعه خود شروع کنید.

مرحله 1 - کتابخانه Calendar Visualization را بارگیری کنید

ابتدا باید لودر را در فایل HTML خود قرار دهید. این لودر به صورت پویا کلاس های اصلی CalVis و همچنین کتابخانه های وابسته به آن (مانند کتابخانه سرویس گیرنده Google Data JavaScript) را بارگیری می کند.

<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 را با جاوا اسکریپت راه اندازی و پیکربندی کنید

با استفاده از جاوا اسکریپت می‌توانید هر رفتار یا ظاهری را سفارشی کنید. به خاطر داشته باشید که قبل از اینکه بتوانید یک شی را در جاوا اسکریپت تغییر دهید، ابتدا باید توسط مرورگر بارگذاری شود، بنابراین ابتدا باید صبر کنید تا تمام کتابخانه های وابسته با بارگذار CalVis بارگیری شوند، این کار با متد calvis.ready() انجام می شود. . این متد یک متد برگشتی فراخوانی می‌گیرد که وقتی همه کتابخانه‌ها بارگیری می‌شوند و CalVis آماده استفاده است، فراخوانی می‌شود.

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

در داخل تابع callback، یک نمونه از شی calvis.Calendar را نمونه‌سازی می‌کنید. اکنون باید شناسه‌های مختلف CSS (اینها از طرح‌بندی HTML در مرحله 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');

اکنون می‌توانید تعیین کنید CalVis از کدام حساب 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('');
}
در نهایت، می‌توانید نمای پیش‌فرض تقویم را تنظیم کنید (نمای «ماهانه» یا «هفته‌ای») و متد render() را برای نمایش رابط کاربری تقویم -
// set the default view to be "month"
calendar.setDefaultView('month');

// display the calendar
calendar.render();
فراخوانی کنید.

یک ظاهر طراحی شده را سفارشی کنید

برای سفارشی کردن اندازه، رنگ یا سبک هر سلول تاریخ، فقط باید ویژگی های استایل CSS چند کلاس CSS از پیش تعریف شده را تغییر دهید. به عنوان مثال، می توانید عرض و ارتفاع هر سلول تاریخ را در نمای ماه خود با لغو کلاس CSS پیش فرض monthViewCell و contentCell تغییر دهید.

نسخه ی نمایشی

این نسخه نمایشی استفاده از CalVis را با استایل پیش‌فرض نشان می‌دهد.

این نسخه نمایشی استفاده از CalVis را با سفارشی‌سازی برای ایجاد یک ترکیب با Google Maps و YouTube API نشان می‌دهد.

مشارکت

CalVis یک پروژه منبع باز است که کد منبع آن از طریق Subversion در میزبانی پروژه کد Google برای دانلود در دسترس است.

منابع