[精讚] [會員登入]
650

[CI3] 使用和修改日曆類別 calendar library

CI3有一個日曆圖書館 library,可以快速的建立一個日曆,但是想修改讓他更棒

此文完整連結 http://n.sfs.tw/12144

複製連結 [CI3] 使用和修改日曆類別 calendar library@新精讚
(文章歡迎轉載,務必尊重版權註明連結來源)
2018-02-05 15:51:29 最後編修
2018-02-04 19:18:59 By 張○○
 

Code ignitor3 有提供一個日曆圖書館 library,可以快速的建立一個日曆,但是想修改讓他更棒,能照我想呈現的方式。

因為我不想自己刻一個,很累。

一、原來的樣貌和修改目標

程式碼

$this->load->library('calendar');
echo $this->calendar->generate();

呈現樣貌

他是一個黑白、英文字的介面。

我希望弄一個美美的、彩色的、中文字介面的月曆。以下是我要改的目標:

1. 要能上下翻
2. AJAX
3. 星期六日紅色標示
4. 國定假日紅色標示
5. 可加連結
6. 非本月的日期也淺色顯示

 

二、建立自己的 calendar library

修正原library,因為要改原 library,所以要建立一個自己的。

$ cd /path/to/system/libraries

$ cp Calendar.php ../../application/libraries/

複製完後修改 application/library/ 中的 Calendar.php 就好了,不要改錯。

 

三、加上中文

預設是英文,如果你的網站為非英文的單語系,你也可以直接修改這個檔案,雖然這樣子做很不好。

/path/to/system/language/calendar_lang.php

因為我的網已經是多語系,有自己的語系檔,修改用自己的語系檔,先把預設的給註解掉133行:

//      $this->CI->lang->load('calendar');

在你自己的語系檔中建立下面語詞:

語系檔 English

語系檔 中文

這樣中文就出來了,切換成英文或其他語系也能正常顯示。

其實有人說為什麼不直接嵌入 google calendar就好,我認為google的真的很醜,而且太複雜,我只要一個單純的月曆。

 

四、顯示其他月份的數字

程式

$prefs= array(
  'show_other_days'=> true
);
$this->load->library('calendar',$prefs );
echo $this->calendar->generate();

原色稍深,找到這幾行

            'cal_cell_start_other'      => '<td style="color: #666;">',
            'cal_cell_content_today'    => '<a href="{content}"><strong>{day}</strong></a>',
            'cal_cell_no_content_today' => '<strong>{day}</strong>',

改成

            'cal_cell_start_other'      => '<td style="color: #99a;">',
            'cal_cell_content_today'    => '<a href="{content}"><span>{day}</span></a>',
            'cal_cell_no_content_today' => '<span>{day}</span>',

並新增二個樣版,作為星期六日該顯示的類別,後面會用到

            'cal_cell_start_sun'            => '<td class="day_sun">',
            'cal_cell_start_sat'            => '<td class="day_sat">',
 

 

五、六日加上顏色

接下來把星六和星日加上顏色,我要星日是紅色,星六的字是綠色,看起來爽。

修改程式

由於程式已經改得很複雜,最後會附上程式,有必要的話只挑重點來說明

並並加上 css

/* 月曆 */
.weekday_sun { color: white; background:#bc0f0f;  border-radius: 5px; }
.weekday_sat { color: white; background:#0d890d;  border-radius: 5px; }

.day_sun { color: red;  }
.day_sat { color: #0d890d;  }
.highlight_today span { padding:1px 5px; color: white; background: #03adbc; border-radius: 10px; }

現在看起來像這樣

 

六、加上上下翻+AJAX

依照指示只要加入參數即可,我自己增加了 is_ajax參數,使用這個參數的話,會用AJAX來呼叫,最後的結果長這樣

 

七、加上「今天」的連結

用一用就覺得一定要有一個回到今天的連結才方便。

另外我覺得左右兩邊分太開,也不好點,應該合在一起,一併修改,同樣的,如果沒有設定左右 'show_next_prev' => TRUE 的話,今天的連結也不會出現

所以看起來像這樣

這樣看起來左邊太小,所以改了css,變成4:3,最後完成版:

 

八、程式碼

Controller

  // AJAX
  public function cal($year=0, $month=0){
    $prefs= array(
       'show_other_days'=> true,
       'show_next_prev'  => TRUE,
       'is_ajax' => true
    );
    $prefs['template'] = array(
        'cal_cell_start_today' => '<td class="highlight_today">',
        'cal_cell_start' => '<td class="day_cell">',
    );

    $this->load->library('calendar',$prefs );
    if($year<3000 && $year > 1000){
      if($month <=0 || $month >12) $month=1;
      echo $this->calendar->generate( intval($year), intval($month));
    }
    else echo $this->calendar->generate();
  }

CSS

/* 月曆 */
table.cal {width:100%; max-width:400px; border:2px solid #DDD; padding:0px; }
table.cal td {text-align:center; width:14%; }
table.cal th {text-align:center; border-bottom:1px solid #BBB; padding-top:5px; }
table.cal th a { margin:6px; padding:2px;   text-decoration:none; }
table.cal th a:hover { background:cyan; }

.weekday_sun { color: white; background:#bc0f0f;  border-radius: 5px; }
.weekday_sat { color: white; background:#0d890d;  border-radius: 5px; }

.day_sun { color: red;  background:#DFF; font-weight:bold; }
.day_sat { color: #0d890d;  background:#DFF; font-weight:bold; }
.day_cell { background:#DFF; }
.highlight_today {background:#DFF; }
.highlight_today span { padding:1px 5px; color: white; background: #03adbc; border-radius: 10px; }

HTML

<div  id="cal">
  <!-- 這裡會顯示月曆第一次啟動會自動叫用 -->
</div>

JS

  showcalendar();

  function showcalendar(yr,mn){
    var url ="/index/cal";
    if(yr)url = url + '/' + yr +'/'+ mn;
    $.ajax({type: "GET", dataType:'html',
     url: url, cache: false }).done(function( d ) {
       $("#cal").html(d);
    });
  }

我還改了library,讓上下界的日期能多7天、能用AJAX、改了很多地方,所以有需要的直接下載,就不貼了

LIBRARY

Calendar.zip

 

結論

其實這是為了在精讚的首頁放一個月曆。 http://n.sfs.tw

大費周張忙了我一天,一直想自己刻又不想自己刻,主要是懶得去算日期,好煩,最後決定

修改 code ignitor 3內建的月曆 library,不得不說CI3的月曆原本就寫得不錯了,但我讓他符合我的需要,也提供給其他有需要的人。

這裡面有一個缺點就是沒有符合我們的節慶,以前有做過手動 ics節日加入的功能,留給以後的計畫去完成吧。

 

參考資料

[1] https://www.codeigniter.com/user_guide/libraries/calendar.html#using-the-calendaring-class

 

你可能感興趣的文章

[phpmyadmin] 缺少 mcrypt 外掛,請檢查 PHP 設定 缺少 mcrypt 外掛,請檢查 PHP 設定,安裝php-mcrypt。

[PHP] 檢查檔案是否是圖檔 使用getimagesize函數檢查檔案是否是圖檔

[PHP] 讀取作業系統程式執行結果 PHP讀取作業系統程式執行結果

PHP程式經驗 #1 -- 靜態的物件比動態物件快 驗證 1. 使用動態物件函式 > 使用靜態物件函式。 2. 使用有宣告的靜態物件函式 > 使用動態無宣告的靜

[CodeIgniter 3] 資料庫的使用方法整理1/2 --Select的使用 [CodeIgniter 3] 資料庫的使用方法整理:Select的使用

[phpmyadmin] 設定預設語言(Language) phpmyadmin預設進來是會選擇你瀏覽器預設的語系,改成正體中文

使用strcmp來判斷日期是否介於某日期之間 要比較現在日期是否在兩個日期之間,使用字串比對的方法

[PHP] preg_match 的貪婪和不貪婪比對 在php preg_match中預設是採用貪婪比對,太貪婪反而不符合需要,因此得採用「非貪婪比對」...

[PHP] 字串編碼及解碼函式 為何要將字串編碼?理由很簡單,就是不要讓人家輕易的知道字串內容是什麼。例如點選分頁時,我們常會用這樣的連結: index

[CodeIgniter3] 解決無法上傳特定檔案(.sb2)的問題 上傳時出現The filetype you are attempting to upload is not allowed,要怎麼解決?

我有話要說


限制:留言最高字數1000字,超過部分會被截掉。請注意:留言不可帶有網址,會被濾掉。 限制:未登入訪客,每則留言間隔需超過10分鐘,每日最多5則留言。

訪客留言

[無留言]

隨機好文

UTF-8 BOM (Byte Order Mark) 的問題 在 Michael Kaplan 那看到 Every character has a story #4: U+feff

精讚的版面變化 ▓此文僅作為舊文的記錄▓ 這篇文章為了紀念改版完成而撰寫。 原本的部落格是民國97年的作品,那時還是用舊有的技術來寫,很

外匯課程經驗 有天遇到某個朋友的正妹朋友,說她有個很棒的外匯投資課程,要我們去聽,只收場地費200大洋。她又說續效最差一個月也有1%,誰還在苦哈哈上班?

[MAC] 安裝APACHE+PHP OS Darwin OpenIDMac1deAir 15.6.0 Darwin Kernel Version 15.6.

[SIP] OPENSER LINUX版本安裝全記錄 [SIP] OPENSER LINUX版本安裝全記錄