Skip to content

Commit

Permalink
[feature] CCalendar: adding basic Bootstrap style for the Calendar.
Browse files Browse the repository at this point in the history 
But not yet for the controls.
  • Loading branch information
@akoprow
akoprow committed Nov 1, 2011
1 parent 72d192d commit f008678
Show file tree
Hide file tree
Showing 3 changed files with 117 additions and 31 deletions.
144 changes: 113 additions & 31 deletions stdlib/components/calendar/calendar.opa
View file
Expand Up @@ -637,7 +637,7 @@ type CCalendar.internal_msg('event) =
extensible_style_config : CCalendar.Style.config = extensible_style_config : CCalendar.Style.config =
extensible_style_date_format = Date.generate_printer("%l:%M%P") extensible_style_date_format = Date.generate_printer("%l:%M%P")
{ {
calendar_style = {class=["CCalendar_extensible"]} calendar_style = {class=["CCalendar", "extensible"]}
animation = {no_animation} animation = {no_animation}
weeks_view = weeks_view =
{ {
Expand Down Expand Up @@ -712,10 +712,22 @@ type CCalendar.internal_msg('event) =
} }
} }


bootstrap_style_config : CCalendar.Style.config =
{ extensible_style_config with
calendar_style = {class=["CCalendar", "bootstrap"]}
weeks_view = { extensible_style_config.weeks_view with
left_header = some(
{
cell_content(week) = <div class="week_hd">{if week < 10 then "0" else ""}{week}</>
width_px = 35
})
}
}

google_style_config : CCalendar.Style.config = google_style_config : CCalendar.Style.config =
google_style_date_format = Date.generate_printer("%H:%M") google_style_date_format = Date.generate_printer("%H:%M")
{ {
calendar_style = {class=["CCalendar_google"]} calendar_style = {class=["CCalendar", "google"]}
animation = {no_animation} animation = {no_animation}
weeks_view = weeks_view =
{ {
Expand Down Expand Up @@ -877,61 +889,131 @@ type CCalendar.internal_msg('event) =
**/ **/
// *************************************************************************************** // ***************************************************************************************


ccalendar_bootstrap_style_css = css
.CCalendar.bootstrap table.monthly {
border-collapse: collapse;
border-spacing: 0px;
}
.CCalendar.bootstrap .monthly td {
border: 1px solid #DDD;
padding: 0px;
spacing: 0px;
}
.CCalendar.bootstrap .monthly .events {
border: none;
}
.CCalendar.bootstrap .monthly .events td {
border: none;
padding: 0px;
spacing: 0px;
}
.CCalendar.bootstrap .monthly .wday_hd { padding: 0px }
.CCalendar.bootstrap .monthly .week_hd { padding: 5px }
.CCalendar.bootstrap .monthly .week_hd, .CCalendar.bootstrap .monthly .wday_hd {
line-height: 20px;
text-align: center;
background-color: whitesmoke;
color: #404040;
}
.CCalendar.bootstrap .monthly .week_hd {
width: 25px;
height: 100%;
}
.CCalendar.bootstrap .monthly .day_hd {
color: #404040;
line-height: 14px;
text-align: right;
padding: 2px 4px 1px 4px
}
.CCalendar.bootstrap .monthly .inact {
background-color: #EEE
}
.CCalendar.bootstrap .monthly .today {
background-color: #FFF6D9;
}
.CCalendar.bootstrap .monthly .inact .day_hd {
color: #808080;
}
.CCalendar.bootstrap .monthly .today .day_hd {
color: #FFC40D
}
.CCalendar.bootstrap .monthly .events .event {
display: block;
width: 100%;
border: none;
background: none;
text-align: left;
white-space: nowrap;
padding: 1px 3px 2px;
// padding: 1px 1px 0px 2px; -- this should go on the parent
line-height: 14px;
cursor: pointer;
}
.CCalendar.bootstrap .monthly .events .event.multiday {
border-radius: 5px;
}
.CCalendar.bootstrap .monthly .events .event div {
overflow: hidden;
}
.CCalendar.bootstrap .monthly .events .event.over {
opacity: .8;
}

ccalendar_extensible_style_css = css ccalendar_extensible_style_css = css
// FIXME, I don't want the style for 'td', but otherwise I get a syntax error // FIXME, I don't want the style for 'td', but otherwise I get a syntax error
td {} td {}
.CCalendar_extensible table.monthly { .CCalendar.extensible table.monthly {
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0px; border-spacing: 0px;
} }
.CCalendar_extensible .monthly td { .CCalendar.extensible .monthly td {
border: 1px solid #BCF; border: 1px solid #BCF;
padding: 0px; padding: 0px;
spacing: 0px; spacing: 0px;
} }
.CCalendar_extensible .monthly .events td { .CCalendar.extensible .monthly .events td {
border: none; border: none;
padding: 0px; padding: 0px;
spacing: 0px; spacing: 0px;
} }
.CCalendar_extensible .monthly .week_hd, .CCalendar_extensible .monthly .wday_hd { .CCalendar.extensible .monthly .week_hd, .CCalendar.extensible .monthly .wday_hd {
line-height: 20px; line-height: 20px;
text-align: center; text-align: center;
font-family: helvetica, arial, sans-serif; font-family: helvetica, arial, sans-serif;
font-weight: normal; font-weight: normal;
font-size: 12px; font-size: 12px;
background-color: #EFEFEF; background-color: #EFEFEF;
} }
.CCalendar_extensible .monthly .week_hd { .CCalendar.extensible .monthly .week_hd {
height: 100%; height: 100%;
} }
.CCalendar_extensible .monthly .week_hd { .CCalendar.extensible .monthly .week_hd {
color: #999 color: #999
} }
.CCalendar_extensible .monthly .wday_hd { .CCalendar.extensible .monthly .wday_hd {
color: #555 color: #555
} }
.CCalendar_extensible .monthly .day_hd { .CCalendar.extensible .monthly .day_hd {
color: #A7C6DF; color: #A7C6DF;
font-family: helvetica, arial, sans-serif; font-family: helvetica, arial, sans-serif;
font-size: 16px; font-size: 16px;
line-height: 14px; line-height: 14px;
text-align: right; text-align: right;
padding: 2px 4px 1px 4px padding: 2px 4px 1px 4px
} }
.CCalendar_extensible .monthly .inact { .CCalendar.extensible .monthly .inact {
background-color: #EFEFEF background-color: #EFEFEF
} }
.CCalendar_extensible .monthly .today { .CCalendar.extensible .monthly .today {
background-color: #FFF4BF background-color: #FFF4BF
} }
.CCalendar_extensible .monthly .inact .day_hd { .CCalendar.extensible .monthly .inact .day_hd {
color: #BBB; color: #BBB;
} }
.CCalendar_extensible .monthly .today .day_hd { .CCalendar.extensible .monthly .today .day_hd {
color: #BFA52F color: #BFA52F
} }
.CCalendar_extensible .monthly .events .event { .CCalendar.extensible .monthly .events .event {
display: block; display: block;
width: 100%; width: 100%;
border: none; border: none;
Expand All @@ -944,20 +1026,20 @@ ccalendar_extensible_style_css = css
font-family: Verdana, sans-serif; font-family: Verdana, sans-serif;
cursor: pointer; cursor: pointer;
} }
.CCalendar_extensible .monthly .events .event.multiday { .CCalendar.extensible .monthly .events .event.multiday {
border-radius: 5px; border-radius: 5px;
} }
.CCalendar_extensible .monthly .events .event div { .CCalendar.extensible .monthly .events .event div {
overflow: hidden; overflow: hidden;
} }
.CCalendar_extensible .monthly .events .event.over { .CCalendar.extensible .monthly .events .event.over {
opacity: .8; opacity: .8;
} }


ccalendar_google_style_css = css ccalendar_google_style_css = css
// FIXME, I don't want the style for 'td', but otherwise I get a syntax error // FIXME, I don't want the style for 'td', but otherwise I get a syntax error
td {} td {}
.CCalendar_google table.monthly { .CCalendar.google table.monthly {
font-size: 11px; font-size: 11px;
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
border-collapse: collapse; border-collapse: collapse;
Expand All @@ -966,21 +1048,21 @@ ccalendar_google_style_css = css
border-bottom: 5px solid #BCF; border-bottom: 5px solid #BCF;
border-spacing: 0px; border-spacing: 0px;
} }
.CCalendar_google .monthly tr td { .CCalendar.google .monthly tr td {
border: 1px solid #DDD; border: 1px solid #DDD;
padding: 0px; padding: 0px;
spacing: 0px; spacing: 0px;
} }
.CCalendar_google .monthly td.today { .CCalendar.google .monthly td.today {
border: 1px solid #FAD163; border: 1px solid #FAD163;
background-color: #FFF7D7 background-color: #FFF7D7
} }
.CCalendar_google .monthly .events td { .CCalendar.google .monthly .events td {
border: none; border: none;
padding: 0px; padding: 0px;
spacing: 0px; spacing: 0px;
} }
.CCalendar_google .monthly .wday_hd { .CCalendar.google .monthly .wday_hd {
color: #20C; color: #20C;
padding-top: 2px; padding-top: 2px;
font-weight: normal; font-weight: normal;
Expand All @@ -989,20 +1071,20 @@ ccalendar_google_style_css = css
text-align: center; text-align: center;
border-bottom-color: #20C border-bottom-color: #20C
} }
.CCalendar_google .monthly .day_hd { .CCalendar.google .monthly .day_hd {
line-height: 16px; line-height: 16px;
color: #666; color: #666;
background-color: #F8F9FF; background-color: #F8F9FF;
text-align: right; text-align: right;
padding-right: 2px; padding-right: 2px;
} }
.CCalendar_google .monthly .today .day_hd { .CCalendar.google .monthly .today .day_hd {
background-color: #FAD163 background-color: #FAD163
} }
.CCalendar_google .monthly .inact .day_hd { .CCalendar.google .monthly .inact .day_hd {
color: #AAA color: #AAA
} }
.CCalendar_google .monthly .events .event { .CCalendar.google .monthly .events .event {
display: block; display: block;
width: 100%; width: 100%;
border: none; border: none;
Expand All @@ -1014,17 +1096,17 @@ ccalendar_google_style_css = css
font-family: Verdana, sans-serif; font-family: Verdana, sans-serif;
cursor: pointer; cursor: pointer;
} }
.CCalendar_google .monthly .events .event.multiday { .CCalendar.google .monthly .events .event.multiday {
border-radius: 5px; border-radius: 5px;
} }
.CCalendar_google .monthly .events .event div { .CCalendar.google .monthly .events .event div {
overflow: hidden; overflow: hidden;
} }
.CCalendar_google .monthly .events .event .time { .CCalendar.google .monthly .events .event .time {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
font-size: 10px; font-size: 10px;
font-weight: bold; font-weight: bold;
} }
.CCalendar_google .monthly .events .event.over { .CCalendar.google .monthly .events .event.over {
opacity: .8; opacity: .8;
} }
3 changes: 3 additions & 0 deletions stdlib/components/calendar/calendar_controls.opa
View file
Expand Up @@ -108,6 +108,9 @@ type CCalendarControls.config('event) =
</> </>
} }


bootstrap_style_config =
extensible_style_config

google_style_config = google_style_config =
{ {
generate(id, cal) = generate(id, cal) =
Expand Down
1 change: 1 addition & 0 deletions stdlib/components/calendar/calendar_meshup.opa
View file
Expand Up @@ -134,5 +134,6 @@ ccalendar_meshup_css =
[ ccalendar_controls_css [ ccalendar_controls_css
, ccalendar_extensible_style_css , ccalendar_extensible_style_css
, ccalendar_google_style_css , ccalendar_google_style_css
, ccalendar_bootstrap_style_css
, default_resizable , default_resizable
] ]

0 comments on commit f008678

Please sign in to comment.