[精讚] [會員登入]
212

[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] 錯誤:您應升級到 MySQL 5.5.0 或更新版本 使用phpmyadmin4出現錯誤:您應升級到 MySQL 5.5.0 或更新版本的解決方式

[Centos 6& 7] 安裝php-geoip php-geoip是PHP由domain、ip查詢城市國家資料非常強的函式

[PHP] CodeIgniter 3+pure+smarty安裝及環境設置2/2 PHP framework CodeIgniter 3+ pure CSS +smarty Template Engine的整合#2

[CodeIgniter 3] 資料庫的使用方法整理2/2 CI3 承襲 CI2,有很多的builder class可以用,依各人的使用習慣,有人喜歡一堆sql字串,有人喜歡用helper

設定Google analytics API #2 -- PHP的程式安裝和撰寫 讓你的網站能夠存取你的Google analytics上面的資料

PHP cli 傳入參數 php cli (PHP命令列的傳入參數使用方法

[PHP] 使用browscap檢查瀏覽器版本 使用PHP內建函數browscap檢查瀏覽器版本

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

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

[PHP] 檢查IP是否在某個網段內 mtachcidr 要檢查IP是否在某個網段內,要寫幾行?10行?5行? 不用,只要2行。以下是我寫的 code /** * matchCI

我有話要說


限制:留言最高字數1000字,超過部分會被截掉。 限制:未登入訪客,每則留言間隔需超過10分鐘,每日最多5則留言。

訪客留言

[無留言]

隨機好文

[MAC] 截取螢幕畫面的方法 截取螢幕畫面的方法,在MAC中叫作螢幕快照,英文是screenshot

沒有非誰做不可的事,也沒有不可被取代的人 沒有非誰做不可的事,也沒有不可被取代的人

魔球中小女孩唱的歌 The show 魔球中小女孩唱的歌 The show

[AS3] 我做的唯一一個Flash As3遊戲UFO INVADSION [AS3] 我做的唯一一個Flash As3遊戲,是第一個也是最後一個,後來就沒再寫as3,不過as3還滿好玩的。

[HTLM5] 表單時間日期date/time輸入類型 介紹HTML5和時間有關的輸入類型date/datetime/datetime-local/month/time/week