diff --git a/wiki/static/common/EventCalendar/EventCalendar.css b/wiki/static/common/EventCalendar/EventCalendar.css
new file mode 100644
index 00000000..a41647e4
--- /dev/null
+++ b/wiki/static/common/EventCalendar/EventCalendar.css
@@ -0,0 +1,454 @@
+/* ======= for EventCalendar ========*/
+
+TABLE.eventcalendar {
+    /* margin:auto; */
+    background-color: #ffffff;
+}
+
+TD.head_yearmonth {
+    border-width:0px;
+    text-align:center;
+    font-size: large;
+}
+
+TD.head_weekday {
+    width:14%;
+
+    border-style:solid;
+    border-width:1px; 
+    border-color:#000000; 
+    background-color: #ffeeee;
+    
+    font-weight:normal;
+    font-size:10pt;
+    text-align:center;
+}
+
+TD.head_day {
+    line-height: 20px;
+    padding:0px;
+    margin:0px;
+    border-style:solid;
+    border-width:1px; 
+    border-color:#000000;
+    border-bottom-width:0px;
+    /* background-color: #FFFFEE; */
+    vertical-align: top;
+    font-weight:normal;
+    font-size:10pt;
+    text-align:left;
+}
+
+TD.head_day_sunday {
+    line-height: 20px;
+    padding:0px;
+    margin:0px;
+    border-style:solid;
+    border-width:1px; 
+    border-color:#000000;
+    border-bottom-width:0px;
+    /* background-color: #FFFFEE; */
+    vertical-align: top;
+    font-weight:normal;
+    font-size:10pt;
+    color: #FF3300;
+    text-align:left;
+}
+
+TD.head_day_today {
+    line-height: 20px;
+    padding:0px;
+    margin:0px;
+    border-style:solid;
+    border-width:1px; 
+    border-color:#000000;
+    border-bottom-width:0px;
+    background-color: #FFFFAA;
+    vertical-align: top;
+    font-weight: bold;
+    font-size:10pt;
+    text-align:left;
+}
+
+TD.head_day_nbmonth {
+    line-height: 20px;
+    padding:0px;
+    margin:0px;
+    border-style:solid;
+    border-width:1px; 
+    border-color:#000000;
+    border-bottom-width:0px;
+    background-color: #eeeeee;
+    vertical-align: top;
+    font-weight:normal;
+    font-size:8pt;
+    text-align:left;
+    color: #999999;
+}
+
+TD.cal_eventbox { 
+    line-height: 11px;
+    padding: 1px 3px 1px 3px;
+    margin: 0px 0px 0px 0px;
+    
+    border-style:solid;
+    border-width:1px; 
+    border-top-width:0px;
+    border-bottom-width:0px;
+    border-color:#000000;
+    
+    vertical-align: middle;
+    text-align: center;
+}
+
+TABLE.cal_event { 
+    width:100%;
+
+    padding:0 0 0 0;
+    margin:0 0 0 0;
+    
+    border-width:0px; 
+    align: center;
+    
+}
+
+TD.cal_event {
+    border-style:solid;
+    border-width:1px; 
+    border-color:#cccccc; 
+    padding:3px;
+    margin:0px;
+    text-align:center;
+    color:#3266cd;    
+    font-weight:normal;
+    font-size: 8pt;
+    display: block;
+    vertical-align: middle;
+}
+
+TD.cal_event_append {
+    border-style:solid;
+    border-width:1px; 
+    border-color:#cccccc; 
+    border-left-width:0px;
+    padding:3px;
+    margin:0px;
+    text-align:center;
+    color:#3266cd;    
+    font-weight:normal;
+    font-size: 8pt;
+    display: block;
+    vertical-align: middle;
+}
+
+TD.cal_event_pending {
+    border-style:solid;
+    border-width:1px; 
+    border-color:#cccccc; 
+    border-right-width:0px;
+    padding:3px;
+    margin:0px;
+    text-align:center;
+    color:#3266cd;    
+    font-weight:normal;
+    font-size: 8pt;
+    display: block;
+    vertical-align: middle;
+}
+
+TD.cal_event_append_pending {
+    border-style:solid;
+    border-width:1px; 
+    border-color:#cccccc; 
+    border-left-width:0px;
+    border-right-width:0px;
+    padding:3px;
+    margin:0px;
+    text-align:center;
+    color:#3266cd;    
+    font-weight:normal;
+    font-size: 8pt;
+    display: block;
+    vertical-align: middle;
+}
+
+TD.cal_nbmonth {
+    border-top-width:0px;
+    border-bottom-width:0px;
+    border-color:#000000;
+    background-color: #eeeeee;
+    padding: 2px;
+    margin: 1px;
+}
+
+TD.cal_noevent {
+    border-top-width:0px;
+    border-bottom-width:0px;
+    border-color:#000000;
+    padding: 2px;
+    margin: 1px;
+}
+
+TD.cal_last_nbmonth {
+    border-top-width:0px;
+    border-bottom-width:1px;
+    border-color:#000000;
+    background-color: #eeeeee;
+    padding: 2px;
+    margin: 1px;
+}
+
+TD.cal_last_noevent {
+    border-top-width:0px;
+    border-bottom-width:1px;
+    border-color:#000000;
+    padding: 2px;
+    margin: 1px;
+}
+
+
+TD.list_head {
+    border-width: 1px;
+    border-style: solid;
+    font-size: 11pt;
+    font-weight: bold;
+    background-color: #cccccc;
+}
+
+TD.list_entry {
+    font-size: 10pt;
+    font-weight: normal;
+}
+
+TD.head_dummy_nbmonth {
+    line-height: 5px;
+    border-top-width:0px;
+    border-bottom-width:0px;
+    border-color:#000000;
+    background-color: #eeeeee;
+    padding: 0px;
+    margin: 0px;
+}
+
+TD.head_dummy {
+    line-height: 5px;
+    border-top-width:0px;
+    border-bottom-width:0px;
+    border-color:#000000;
+    padding: 0px;
+    margin: 0px;
+}
+
+TABLE.eventcalendar_menubar {
+    /* margin:auto; */
+}
+
+TD.eventcalendar_menubar {
+    border-width: 0px;
+    /* text-align: left; */
+    font-size: 9pt;
+}
+
+TABLE.eventcalendar_msg {
+    /* margin:auto; */
+}
+
+TD.eventcalendar_msg {
+    background-color: #FFFF66;
+    border-width: 0px;
+    font-size: 9pt; 
+    color: #990000;
+}
+
+TABLE.simplecalendar {
+    /* margin:auto; */
+}
+
+TD.simple_nb {
+    line-height: 10px;
+    padding:0px;
+    margin:0px;
+    border-style:solid;
+    border-width:0px; 
+    border-color:#000000;
+    vertical-align: middle;
+    font-weight:normal;
+    font-size:8pt;
+    text-align:center;
+}
+
+TD.simple_event {
+    line-height: 20px;
+    padding:0px;
+    margin:0px;
+    border-style:solid;
+    border-width:1px; 
+    border-color:#c0c0c0;
+    background-color: #eeffff;
+    vertical-align: middle;
+    font-weight:bold;
+    font-size:8pt;
+    text-align:center;
+}
+
+TD.simple_noevent {
+    line-height: 20px;
+    padding:0px;
+    margin:0px;
+    border-style:solid;
+    border-width:1px; 
+    border-color:#c0c0c0;
+    vertical-align: middle;
+    font-weight:normal;
+    color: #c0c0c0;
+    font-size:8pt;
+    text-align:center;
+}
+
+TD.simple_event_today {
+    line-height: 20px;
+    padding:0px;
+    margin:0px;
+    border-style:solid;
+    border-width:2px; 
+    border-color:#ff9999;
+    background-color: #eeffff;
+    vertical-align: middle;
+    font-weight:bold;
+    font-size:8pt;
+    text-align:center;
+}
+
+TD.simple_noevent_today {
+    line-height: 20px;
+    padding:0px;
+    margin:0px;
+    border-style:solid;
+    border-width:2px; 
+    border-color:#ff9999;
+    vertical-align: middle;
+    font-weight:normal;
+    color: #c0c0c0;
+    font-size:8pt;
+    text-align:center;
+}
+
+TD.simple_yearmonth {
+    border-width:0px;
+    text-align:center;
+    font-size: 10pt;
+}
+
+TD.simple_weekday {
+    width:14%;
+
+    padding: 0 1px 0 1px;
+    margin: 0 1px 0 1px;
+
+    border-width:0px; 
+    /* background-color: #ffeeee; */
+    
+    font-weight:bold;
+    font-size:8pt;
+    text-align:center;
+}
+
+TD.cal_daily_noevent {
+    padding: 2px;
+    margin: 1px;
+    width: 96%; 
+    border-style: dotted solid dotted solid; 
+    border-top-color: #eeeeee; 
+    border-bottom-color: #eeeeee; 
+    border-left-color: #aaaaaa; 
+    border-right-color: #aaaaaa; 
+    border-top-width: 1px; 
+    border-bottom-width: 1px; 
+    line-height: 11px; 
+}
+
+TD.cal_eventbox_time {
+    width: 10px;
+    border-width: 0px; 
+    padding: 0px; 
+    margin: 0px; 
+    text-align: left; 
+    vertical-align: top; 
+    font-size: 7pt; 
+    color: #000000;
+}
+
+TD.cal_eventbox_time_event {
+    border-width: 0px; 
+    padding: 0px; 
+    margin: 0px; 
+    text-align: left; 
+    vertical-align: top;
+    font-size: 8pt;
+}
+
+TD.cal_daily_noevent {
+    padding: 2px;
+    margin: 1px;
+    width: 96%; 
+    border-style: dotted solid dotted solid; 
+    border-top-color: #eeeeee; 
+    border-bottom-color: #eeeeee; 
+    border-left-color: #aaaaaa; 
+    border-right-color: #aaaaaa; 
+    border-top-width: 1px; 
+    border-bottom-width: 1px; 
+    line-height: 11px; 
+}
+
+TD.cal_weekly_noevent {
+    padding: 2px;
+    margin: 1px;
+    width: 14%; 
+    border-style: dotted solid dotted solid; 
+    border-top-color: #eeeeee; 
+    border-bottom-color: #eeeeee; 
+    border-left-color: #aaaaaa; 
+    border-right-color: #aaaaaa; 
+    border-top-width: 0px; 
+    border-bottom-width: 0px; 
+    line-height: 11px; 
+
+}
+
+TD.cal_blankeventbox {
+    border-style: dotted solid dotted solid; 
+    border-top-color: #eeeeee; 
+    border-bottom-color: #eeeeee; 
+    border-left-color: #aaaaaa; 
+    border-right-color: #aaaaaa; 
+    border-top-width: 1px; 
+    border-bottom-width: 1px;  
+    line-height: 11px;
+}
+
+TD.cal_weekly_eventbox {
+    border-width: 2px; 
+    border-color: #000000; 
+    vertical-align: top; 
+    font-size: 9pt; 
+}
+
+TD.cal_weekly_eventbox2 {
+    border-style: dotted solid dotted solid; 
+    border-top-color: #eeeeee; 
+    border-bottom-color: #eeeeee; 
+    border-left-color: #aaaaaa; 
+    border-right-color: #aaaaaa; 
+    border-top-width: 0px; 
+    border-bottom-width: 0px; 
+    line-height: 11px;
+}
+
+TD.cal_hourhead {
+    line-height: 11px; 
+    font-weight:normal; 
+    font-size:10pt; 
+    text-align:right; 
+    vertical-align: top;
+}