將Google行事曆崁入Xoops自訂區塊及共用設定教學-教學撰寫:徐嘉裕Neil hsu

Google行事曆是一個非常好用的功能,當設定的事件觸發時,除了Chrome瀏覽器會發出通知外,如果手機是Android系統,則手機也會發出提示響聲,也能在手機的app軟體日曆上直接編寫事件內容,並且有支援iframe程式碼可以吧行事曆崁入在Xoops網站的自訂區塊中,像是以下的呈現方式:


範例網站:http://163.30.85.10/

而且除了顯示官網行事曆事件外,還能吧其他會員的行事曆也一起加入到官網行事曆中,就像g+的相互關注功能一樣,只又雙方互設公開跟加入對方帳號,就能在雙方的行事曆上顯示對方的事件內容。





設定方法如下:

1、先進入Google行事曆中 網址:https://calendar.google.com  使用Google帳號登入。

2、找到左邊的我的日曆,點選日曆右邊有一個三角形箭頭,點選後會有選單,選擇【共用此日曆】







3、進入設定頁面中,吧【與其他人共用此日曆】給勾選起來




備註說明:如果公開日曆只能顯示【看見是否有空】而無法選擇事件,請進入Goople管理控制台:
https://admin.google.com

A、在管理控制台資訊主頁中,依序前往 [應用程式][G Suite][日曆]。
B、選擇日曆->按一下 [變更分享設定]。


這樣就能變更日曆為顯示事件狀態

如果是公家機關用的G Suite帳號所開設的子帳號,請用最高管理權限那組G Suite帳號帳號->應用程式->[G Suite]->日曆設定中修改共用設定:改為【分享所有資訊】這樣G Suite底下的子帳號才能使用公開日曆的【查看所有活動詳情資訊】功能。






4、在下方的【與特定使用者共用日曆】中輸入要顯示在官網行事曆中的會員帳號,例如要顯示b168168tw@gmail.com的行事曆在官網行事曆中,則填入對方的GMAIL帳號,完成後點選儲存。

5、如果要吧b168168tw@gmail.com刪除不顯示在官網行事曆中,按照說明2的方法進到【共用此日曆】,然後找到【與特定使用者共用日曆】,找到要刪除的帳號,點選右邊的垃圾桶後儲存即可刪除,被刪除的帳號的行事曆事件將不會顯示在官網行事曆中。


6、(很重要)被加入行事曆會員的帳號必須設為公開才行,否則官網行事曆會出現沒有檢視日曆的權限如下圖,所以必須還要通知被加入行事曆的會員按照說明3操作設為公開行事曆才行,這樣事件才會顯示在官網行事曆上。





7、接下來就是設定要崁入Xoops自訂區塊的部分了,需要取得行事曆的iframe程式碼,請點選上方的返回日曆



8、回到日曆首頁後,點選我的日曆->選擇日曆->點選右邊的箭頭會跳出選單->選擇【日曆設定】





9、進到日曆設定後,找到崁入此日曆->找到右邊的【自訂顏色、大小與其他選項】點選進入。





10、可以設定要崁入的行事曆大小,不能太大會拉破網站版面,太小又不好看有空白,可以自行調整最適大小。





11、很重要,吧要顯示在官網行事曆中的會員行事曆及假期行事曆官網行事曆勾選起來。




其中的Contacts選項千萬不要勾,這個功能主要是顯示通訊錄中會員生日訊息,但因IE瀏覽器不支援其中的JS或CSS設定,如果勾了崁入的行事曆介面會醜得跟狗啃的一樣,功能也會異常,只能在Google Chrome瀏覽器中才能正常顯示內容,所以千萬不要勾選Contacts選項(如果您不介意IE瀏覽器的介面呈現勾起來是沒差)。


12、接者點選上方的更新HTML按鈕,然後吧下方文字框中程式碼全部的CODE複製起來




13、進到您的Xoops網站管理後台->選擇模組->系統管理->區塊



14、點選右邊的新增區塊按鈕





15、按照以下A.B.C進行區塊設定



A:設為啟用(這樣區塊才會顯示在頁面上)
B:填入區塊標題
C:吧剛剛複製的行事曆程式碼貼入內容框中。

然後選擇下方的送出。

這樣就完成吧Google行事曆崁入Xoops自訂區塊的操作了,去前台看一下行事曆是否有呈現。

如果設定正確官網的事件跟會員的事件都會出現在官網行事曆中!!



如果之後有要新增其他的會員近來官網行事曆中,或是要刪除目前的行事曆群組中的會員,請重複【說明4到說明15的操作】,包括崁入的程式碼及Xoops的行事曆區塊程式碼都要覆蓋更新才行。

如果要管理官網行事曆或是會員要管理自己的行事曆,最快的方法就是點選官網行事曆下方的Google日曆按鈕,就能進到行事曆的管理介面中了。





教學撰寫: 徐嘉裕 Neil hsu

留言

這個網誌中的熱門文章

jquery.datepicker下拉月曆只顯示年-月的設定方法-教學撰寫:徐嘉裕Neil hsu

在CentOS7上安裝XAMPP並設定允許外部連線phpmyadmin的方法-教學撰寫:徐嘉裕Neil hsu

jQuery用.each()取代for迴圈