জুন 2008
দ্রষ্টব্য - এটি একটি ওপেন সোর্স প্রজেক্ট যা একজন Googler দ্বারা শুরু করা হয়েছে এবং একটি আনুষ্ঠানিকভাবে সমর্থিত লাইব্রেরি নয়৷ আমরা যোগদান করতে এবং অবদান রাখতে আগ্রহী সকলকে আমন্ত্রণ জানাই :)
ভূমিকা
আপনি কি কখনও Google ক্যালেন্ডার ডেটা ব্যবহার করে আপনার ওয়েবসাইটে একটি কাস্টমাইজড ক্যালেন্ডার অভিজ্ঞতা তৈরি করতে চেয়েছেন কিন্তু কীভাবে ক্যালেন্ডার ডেটা দৃশ্যমানভাবে উপস্থাপন করবেন তা নিশ্চিত নন? এই দ্বিধা ভাগ করে যারা ডেভেলপার একটি ভাল সংখ্যক আছে বলে মনে হচ্ছে. যদিও Google ক্যালেন্ডার ডেটা API হল একটি শক্তিশালী ওয়েব পরিষেবা API কারণ এটি আপনাকে আপনার সমস্ত Google ক্যালেন্ডার ডেটার সমৃদ্ধিতে ট্যাপ করতে দেয়, এটি ডেটা ভিজ্যুয়ালাইজেশনের কোনও বিধান ছাড়াই একটি বিশুদ্ধ পঠন/লেখা ডেটা API হিসাবে রয়ে গেছে।
এই নিবন্ধে, আমি একটি নমুনা লাইব্রেরি প্রদর্শন করতে যাচ্ছি যা আমি এই সমস্যাটি দূর করার জন্য লিখেছি। আমি ওপেন সোর্স প্রজেক্ট, ক্যালেন্ডার ভিজ্যুয়ালাইজেশন ( ক্যালভিস ) শুরু করেছি, যার লক্ষ্য Google ক্যালেন্ডার অ্যাকাউন্ট থেকে ডেটা উপস্থাপন করার জন্য একটি সহজ এবং কাস্টমাইজযোগ্য ইউজার ইন্টারফেস (UI) প্রদান করা। CalVis Google ক্যালেন্ডার ডেটা API এর মাধ্যমে সরাসরি আপনার Google ক্যালেন্ডার অ্যাকাউন্ট থেকে ডেটা আঁকে। ( সম্পাদকের দ্রষ্টব্য: v3 থেকে, Google ক্যালেন্ডার আর Google ডেটা বিন্যাস ব্যবহার করে না।) এটি Google ক্যালেন্ডারের সাথে যোগাযোগের জন্য নীচের Google ডেটা জাভাস্ক্রিপ্ট ক্লায়েন্ট লাইব্রেরি ব্যবহার করে এবং কাস্টমাইজেশনে সর্বাধিক নমনীয়তা তৈরি করার জন্য ডিজাইন করা হয়েছে।
CalVis ডিজাইন করা হয়েছে যাতে ডেভেলপারদের সমৃদ্ধ ক্যালেন্ডার UI অভিজ্ঞতা পুনরায় তৈরি করতে না হয়। বিকাশকারীরা এটিকে Google ক্যালেন্ডার ডেটা ওভারলে করার জন্য কাস্টমাইজযোগ্য টেমপ্লেট ধারক হিসাবে ব্যবহার করতে পারে৷ বিকাশকারীরা ক্যালেন্ডার ডেটা রেন্ডার করতে এবং তাদের সাইটের সাথে কাস্টমাইজড ইন্টিগ্রেশনের গভীর স্তর অর্জন করতে CalVis ব্যবহার করতে পারে। আপনি যেমন শিখবেন, ক্যালভিসের উপরে নির্মিত একটি ইন্টারফেস জাভাস্ক্রিপ্ট, এইচটিএমএল এবং সিএসএস এর মাধ্যমে সম্পূর্ণরূপে কাস্টমাইজযোগ্য। বিকাশকারীরা ক্যালেন্ডার ডেটা রেন্ডার করার জন্য প্রয়োজনীয় ক্যালেন্ডার নিয়ন্ত্রণ উপাদানগুলির একটি সেট সহ একটি কাস্টমাইজড ক্যালেন্ডার ইন্টারফেস দ্রুত এবং সহজেই স্থাপন করতে সক্ষম হবে।
CalVis ব্যবহার করে
নিম্নলিখিত পদক্ষেপগুলি আপনাকে আপনার বিকাশের জন্য CalVis ব্যবহার শুরু করতে সহায়তা করে।
ধাপ 1 - ক্যালেন্ডার ভিজ্যুয়ালাইজেশন লাইব্রেরি লোড করুন
প্রথমে আপনাকে আপনার 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 - ক্যালেন্ডার ইন্টারফেসের ভিজ্যুয়াল স্ট্রাকচার এইচটিএমএল এর সাথে লে আউট করুন
CalVis-এর বেশ কয়েকটি পূর্বনির্ধারিত ভিজ্যুয়াল উপাদান রয়েছে যা ক্যালেন্ডার ইন্টারফেস তৈরি করে। এই ইন্টারফেস উপাদানগুলির কাঠামোগত বিন্যাস আপনার HTML লেআউট দ্বারা সংজ্ঞায়িত করা হয়।
CalVis এর UI উপাদানগুলি হল:
- লগইন নিয়ন্ত্রণ (শুধুমাত্র ব্যক্তিগত ক্যালেন্ডারের জন্য)
এটি 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 ব্যবহার করে যেকোনো আচরণ বা চেহারা কাস্টমাইজ করতে পারেন। মনে রাখবেন যে আপনি জাভাস্ক্রিপ্টে একটি বস্তু সংশোধন করার আগে, এটি প্রথমে ব্রাউজার দ্বারা লোড করা আবশ্যক, তাই আপনাকে প্রথমে সমস্ত নির্ভরশীল লাইব্রেরিগুলি CalVis লোডারের সাথে লোড না হওয়া পর্যন্ত অপেক্ষা করতে হবে, এটি calvis.ready() পদ্ধতিতে করা হয় . এই পদ্ধতিটি একটি কলব্যাক পদ্ধতি গ্রহণ করে যা সমস্ত লাইব্রেরি লোড হয়ে গেলে এবং CalVis ব্যবহারের জন্য প্রস্তুত হলে এটি চালু করা হবে।
window.onload = function() {
calvis.ready(callback);
}
কলব্যাক ফাংশনের ভিতরে, আপনি calvis.Calendar অবজেক্টের একটি উদাহরণ তৈরি করবেন। এখন আপনাকে বিভিন্ন CSS আইডি বরাদ্দ করতে হবে (এগুলি ধাপ 3-এ HTML লেআউট থেকে সংজ্ঞায়িত করা হয়েছে) সংশ্লিষ্ট ক্যালেন্ডার 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');
এখন আপনি উল্লেখ করতে পারেন যে কোন Google ক্যালেন্ডার অ্যাকাউন্ট CalVis থেকে ডেটা সংগ্রহ করা উচিত৷ একটি পাবলিক ক্যালেন্ডার নির্দিষ্ট করতে -
// 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('');
}
অবশেষে, আপনি ক্যালেন্ডারের ডিফল্ট ভিউ সেট করতে পারেন (হয় একটি 'মাস' বা 'সপ্তাহ' ভিউ) এবং ক্যালেন্ডার UI প্রদর্শন করার জন্য রেন্ডার() পদ্ধতি চালু করতে পারেন -// set the default view to be "month"
calendar.setDefaultView('month');
// display the calendar
calendar.render();
স্টাইল কাস্টমাইজ করুন
একটি পৃথক তারিখ ঘরের আকার, রঙ বা শৈলী কাস্টমাইজ করতে, আপনাকে কেবলমাত্র কয়েকটি পূর্বনির্ধারিত CSS ক্লাসের CSS স্টাইলিং বৈশিষ্ট্যগুলি পরিবর্তন করতে হবে। উদাহরণস্বরূপ, আপনি ডিফল্ট CSS ক্লাস monthViewCell এবং contentCell-কে ওভাররাইড করে আপনার মাস ভিউতে প্রতিটি তারিখ ঘরের প্রস্থ এবং উচ্চতা পরিবর্তন করতে পারেন।
ডেমো
এই ডেমো ডিফল্ট স্টাইলিং সহ CalVis ব্যবহার করে দেখায়।
এই ডেমো Google Maps এবং YouTube API-এর সাথে একটি ম্যাশ-আপ তৈরি করতে কাস্টমাইজেশন সহ CalVis ব্যবহার করে দেখায়।
অবদান
ক্যালভিস একটি ওপেন সোর্স প্রজেক্ট , যার সোর্স কোড গুগল কোড প্রোজেক্ট হোস্টিং-এ সাবভার্সনের মাধ্যমে ডাউনলোডের জন্য উপলব্ধ।