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

URL Link //n.sfs.tw/12144

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