diff --git a/modules/calendar/.DS_Store b/modules/calendar/.DS_Store
new file mode 100644
index 0000000..d8987f1
Binary files /dev/null and b/modules/calendar/.DS_Store differ
diff --git a/modules/calendar/_calendar_widget1.html.erb b/modules/calendar/_calendar_widget1.html.erb
new file mode 100644
index 0000000..bb9e795
--- /dev/null
+++ b/modules/calendar/_calendar_widget1.html.erb
@@ -0,0 +1,58 @@
+<div class="w-calendar widget-calendar-1" data-module="calendar">
+    <div class='month_template'>
+            <h4 class="widget-title ">
+                <span class="text"></span>
+                <i class="fa fa-circle-o-notch fa-spin fa-fw loading hide"></i> 
+            </h4>
+        <div class="w-calendar-nav">
+            <a href="#" class="w-calendar-nav-prev">
+                <i class="fa fa-chevron-left"></i>
+                <span class="w-calendar-nav-prev-text hide">Prev</span>
+            </a>
+            <a href="#" class="w-calendar-nav-next">
+                <i class="fa fa-chevron-right"></i>
+                <span class="w-calendar-nav-next-text hide">Next</span>
+            </a>
+        </div>
+        <table class="table table-condensed w-calendar-table">
+            <thead>
+                <tr>
+                    <th>Sun</th>
+                    <th>Mon</th>
+                    <th>Tue</th>
+                    <th>Wed</th>
+                    <th>Thu</th>
+                    <th>Fri</th>
+                    <th>Sat</th>
+                </tr>
+            </thead>
+            <tbody></tbody>
+        </table>
+    </div>  
+</div>
+
+<script>
+    if(document.getElementById("calendar-widget_module") == null){
+        var tag = document.createElement('script');
+        tag.setAttribute("id", "calendar-widget_module");
+        tag.src = "/assets/calendar_widget.js";
+        tag.onload = function(){
+            $("div[data-module=calendar]").each(function(index){
+                var calendar = $(this),
+                    cmi = new CalendarModuleMonth(new Date(), calendar,calendar.data("subpart-id"),"{{more_url}}");
+                cmi.currentMonth();
+                calendar.find("div.w-calendar-nav a").on("click",function(){
+                    var el = $(this);
+                    if(el.hasClass("w-calendar-nav-prev")){
+                        cmi.prevMonth();
+                    }else if(el.hasClass("w-calendar-nav-next")){
+                        cmi.nextMonth();
+                    }
+                    return false;
+                })
+            })
+        }
+        var head = document.getElementsByTagName("head");
+        head[0].appendChild(tag);
+    }
+</script>
\ No newline at end of file
diff --git a/modules/calendar/index.html.erb b/modules/calendar/index.html.erb
new file mode 100644
index 0000000..f573205
--- /dev/null
+++ b/modules/calendar/index.html.erb
@@ -0,0 +1,40 @@
+<div id="orbit_calendar">
+  <div id="sec1">
+    <div class="btn-toolbar" id="navigation">
+      <div id="calendar-nav">
+        <div class="btn-group">
+          <button class="btn btn-default btn-sm" id="prev_month_btn">
+            <i class="icon-chevron-left"></i>
+          </button>
+          <button class="btn btn-default btn-sm" id="next_month_btn">
+            <i class="icon-chevron-right"></i>
+          </button>
+          <button class="btn btn-default btn-sm" id="today_btn">Today</button>
+        </div>
+      </div>
+    </div>
+    <div class="form-inline" id="range_selection"></div>
+  </div>
+  <div id='sec3' class="btn-toolbar">
+    <div class="btn-group calendar_mode">
+      <button class="btn btn-default mode_switch btn-sm" data-mode="agendaDay" >day</button>
+      <button class="btn btn-default mode_switch btn-sm" data-mode="agendaWeek" >week</button>
+      <button class="btn btn-default active mode_switch btn-sm" data-mode="month" >month</button>
+      <button class="btn btn-default mode_switch btn-sm" data-mode="agenda" >agenda</button>
+    </div>
+    <button id="refresh_btn" class="btn btn-default btn-sm">
+      <i class="icons-cycle"></i>
+    </button>
+  </div>
+  <div id="view_holder">
+    <h3 id="current_title" class="current_day_title"></h3>
+    <div id="calendar"></div>
+    <div id="calendar_agenda"></div>
+  </div>
+</div>
+<div id="event_quick_view" class="modal" style="width: 300px; display:none; margin:0 0 0 0;"></div>
+<div id="calendar-loading"></div>
+
+<script type="text/javascript">
+  var calendar = new Calendar("#calendar","{{page_id}}");
+</script>
\ No newline at end of file
diff --git a/modules/calendar/info.json b/modules/calendar/info.json
new file mode 100644
index 0000000..02d8167
--- /dev/null
+++ b/modules/calendar/info.json
@@ -0,0 +1,22 @@
+{
+    "frontend": [
+        {
+            "filename" : "index",
+            "name" : {
+                "zh_tw" : "1. 行事曆",
+                "en" : "1. Calendar"
+                },
+            "thumbnail" : "thumb.png"
+        }
+    ],
+    "widgets" : [
+        {
+            "filename" : "calendar_widget1",
+            "name" : {
+                "zh_tw" : "1. 行事曆",
+                "en" : "1. Calendar"
+            },
+            "thumbnail" : "thumb.png"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/modules/calendar/thumbs/thumb.png b/modules/calendar/thumbs/thumb.png
new file mode 100644
index 0000000..266af56
Binary files /dev/null and b/modules/calendar/thumbs/thumb.png differ