Skip to content
This repository
Browse code

[feature] CCalendar: adding basic Bootstrap style for the Calendar.

But not yet for the controls.
  • Loading branch information...
commit f008678a2bdd346aaf71b932ebb1fcf6649e4b68 1 parent 72d192d
Adam Koprowski akoprow authored
144 stdlib/components/calendar/calendar.opa
@@ -637,7 +637,7 @@ type CCalendar.internal_msg('event) =
637 637 extensible_style_config : CCalendar.Style.config =
638 638 extensible_style_date_format = Date.generate_printer("%l:%M%P")
639 639 {
640   - calendar_style = {class=["CCalendar_extensible"]}
  640 + calendar_style = {class=["CCalendar", "extensible"]}
641 641 animation = {no_animation}
642 642 weeks_view =
643 643 {
@@ -712,10 +712,22 @@ type CCalendar.internal_msg('event) =
712 712 }
713 713 }
714 714
  715 + bootstrap_style_config : CCalendar.Style.config =
  716 + { extensible_style_config with
  717 + calendar_style = {class=["CCalendar", "bootstrap"]}
  718 + weeks_view = { extensible_style_config.weeks_view with
  719 + left_header = some(
  720 + {
  721 + cell_content(week) = <div class="week_hd">{if week < 10 then "0" else ""}{week}</>
  722 + width_px = 35
  723 + })
  724 + }
  725 + }
  726 +
715 727 google_style_config : CCalendar.Style.config =
716 728 google_style_date_format = Date.generate_printer("%H:%M")
717 729 {
718   - calendar_style = {class=["CCalendar_google"]}
  730 + calendar_style = {class=["CCalendar", "google"]}
719 731 animation = {no_animation}
720 732 weeks_view =
721 733 {
@@ -877,24 +889,94 @@ type CCalendar.internal_msg('event) =
877 889 **/
878 890 // ***************************************************************************************
879 891
  892 +ccalendar_bootstrap_style_css = css
  893 + .CCalendar.bootstrap table.monthly {
  894 + border-collapse: collapse;
  895 + border-spacing: 0px;
  896 + }
  897 + .CCalendar.bootstrap .monthly td {
  898 + border: 1px solid #DDD;
  899 + padding: 0px;
  900 + spacing: 0px;
  901 + }
  902 + .CCalendar.bootstrap .monthly .events {
  903 + border: none;
  904 + }
  905 + .CCalendar.bootstrap .monthly .events td {
  906 + border: none;
  907 + padding: 0px;
  908 + spacing: 0px;
  909 + }
  910 + .CCalendar.bootstrap .monthly .wday_hd { padding: 0px }
  911 + .CCalendar.bootstrap .monthly .week_hd { padding: 5px }
  912 + .CCalendar.bootstrap .monthly .week_hd, .CCalendar.bootstrap .monthly .wday_hd {
  913 + line-height: 20px;
  914 + text-align: center;
  915 + background-color: whitesmoke;
  916 + color: #404040;
  917 + }
  918 + .CCalendar.bootstrap .monthly .week_hd {
  919 + width: 25px;
  920 + height: 100%;
  921 + }
  922 + .CCalendar.bootstrap .monthly .day_hd {
  923 + color: #404040;
  924 + line-height: 14px;
  925 + text-align: right;
  926 + padding: 2px 4px 1px 4px
  927 + }
  928 + .CCalendar.bootstrap .monthly .inact {
  929 + background-color: #EEE
  930 + }
  931 + .CCalendar.bootstrap .monthly .today {
  932 + background-color: #FFF6D9;
  933 + }
  934 + .CCalendar.bootstrap .monthly .inact .day_hd {
  935 + color: #808080;
  936 + }
  937 + .CCalendar.bootstrap .monthly .today .day_hd {
  938 + color: #FFC40D
  939 + }
  940 + .CCalendar.bootstrap .monthly .events .event {
  941 + display: block;
  942 + width: 100%;
  943 + border: none;
  944 + background: none;
  945 + text-align: left;
  946 + white-space: nowrap;
  947 + padding: 1px 3px 2px;
  948 +// padding: 1px 1px 0px 2px; -- this should go on the parent
  949 + line-height: 14px;
  950 + cursor: pointer;
  951 + }
  952 + .CCalendar.bootstrap .monthly .events .event.multiday {
  953 + border-radius: 5px;
  954 + }
  955 + .CCalendar.bootstrap .monthly .events .event div {
  956 + overflow: hidden;
  957 + }
  958 + .CCalendar.bootstrap .monthly .events .event.over {
  959 + opacity: .8;
  960 + }
  961 +
880 962 ccalendar_extensible_style_css = css
881 963 // FIXME, I don't want the style for 'td', but otherwise I get a syntax error
882 964 td {}
883   - .CCalendar_extensible table.monthly {
  965 + .CCalendar.extensible table.monthly {
884 966 border-collapse: collapse;
885 967 border-spacing: 0px;
886 968 }
887   - .CCalendar_extensible .monthly td {
  969 + .CCalendar.extensible .monthly td {
888 970 border: 1px solid #BCF;
889 971 padding: 0px;
890 972 spacing: 0px;
891 973 }
892   - .CCalendar_extensible .monthly .events td {
  974 + .CCalendar.extensible .monthly .events td {
893 975 border: none;
894 976 padding: 0px;
895 977 spacing: 0px;
896 978 }
897   - .CCalendar_extensible .monthly .week_hd, .CCalendar_extensible .monthly .wday_hd {
  979 + .CCalendar.extensible .monthly .week_hd, .CCalendar.extensible .monthly .wday_hd {
898 980 line-height: 20px;
899 981 text-align: center;
900 982 font-family: helvetica, arial, sans-serif;
@@ -902,16 +984,16 @@ ccalendar_extensible_style_css = css
902 984 font-size: 12px;
903 985 background-color: #EFEFEF;
904 986 }
905   - .CCalendar_extensible .monthly .week_hd {
  987 + .CCalendar.extensible .monthly .week_hd {
906 988 height: 100%;
907 989 }
908   - .CCalendar_extensible .monthly .week_hd {
  990 + .CCalendar.extensible .monthly .week_hd {
909 991 color: #999
910 992 }
911   - .CCalendar_extensible .monthly .wday_hd {
  993 + .CCalendar.extensible .monthly .wday_hd {
912 994 color: #555
913 995 }
914   - .CCalendar_extensible .monthly .day_hd {
  996 + .CCalendar.extensible .monthly .day_hd {
915 997 color: #A7C6DF;
916 998 font-family: helvetica, arial, sans-serif;
917 999 font-size: 16px;
@@ -919,19 +1001,19 @@ ccalendar_extensible_style_css = css
919 1001 text-align: right;
920 1002 padding: 2px 4px 1px 4px
921 1003 }
922   - .CCalendar_extensible .monthly .inact {
  1004 + .CCalendar.extensible .monthly .inact {
923 1005 background-color: #EFEFEF
924 1006 }
925   - .CCalendar_extensible .monthly .today {
  1007 + .CCalendar.extensible .monthly .today {
926 1008 background-color: #FFF4BF
927 1009 }
928   - .CCalendar_extensible .monthly .inact .day_hd {
  1010 + .CCalendar.extensible .monthly .inact .day_hd {
929 1011 color: #BBB;
930 1012 }
931   - .CCalendar_extensible .monthly .today .day_hd {
  1013 + .CCalendar.extensible .monthly .today .day_hd {
932 1014 color: #BFA52F
933 1015 }
934   - .CCalendar_extensible .monthly .events .event {
  1016 + .CCalendar.extensible .monthly .events .event {
935 1017 display: block;
936 1018 width: 100%;
937 1019 border: none;
@@ -944,20 +1026,20 @@ ccalendar_extensible_style_css = css
944 1026 font-family: Verdana, sans-serif;
945 1027 cursor: pointer;
946 1028 }
947   - .CCalendar_extensible .monthly .events .event.multiday {
  1029 + .CCalendar.extensible .monthly .events .event.multiday {
948 1030 border-radius: 5px;
949 1031 }
950   - .CCalendar_extensible .monthly .events .event div {
  1032 + .CCalendar.extensible .monthly .events .event div {
951 1033 overflow: hidden;
952 1034 }
953   - .CCalendar_extensible .monthly .events .event.over {
  1035 + .CCalendar.extensible .monthly .events .event.over {
954 1036 opacity: .8;
955 1037 }
956 1038
957 1039 ccalendar_google_style_css = css
958 1040 // FIXME, I don't want the style for 'td', but otherwise I get a syntax error
959 1041 td {}
960   - .CCalendar_google table.monthly {
  1042 + .CCalendar.google table.monthly {
961 1043 font-size: 11px;
962 1044 font-family: Arial, sans-serif;
963 1045 border-collapse: collapse;
@@ -966,21 +1048,21 @@ ccalendar_google_style_css = css
966 1048 border-bottom: 5px solid #BCF;
967 1049 border-spacing: 0px;
968 1050 }
969   - .CCalendar_google .monthly tr td {
  1051 + .CCalendar.google .monthly tr td {
970 1052 border: 1px solid #DDD;
971 1053 padding: 0px;
972 1054 spacing: 0px;
973 1055 }
974   - .CCalendar_google .monthly td.today {
  1056 + .CCalendar.google .monthly td.today {
975 1057 border: 1px solid #FAD163;
976 1058 background-color: #FFF7D7
977 1059 }
978   - .CCalendar_google .monthly .events td {
  1060 + .CCalendar.google .monthly .events td {
979 1061 border: none;
980 1062 padding: 0px;
981 1063 spacing: 0px;
982 1064 }
983   - .CCalendar_google .monthly .wday_hd {
  1065 + .CCalendar.google .monthly .wday_hd {
984 1066 color: #20C;
985 1067 padding-top: 2px;
986 1068 font-weight: normal;
@@ -989,20 +1071,20 @@ ccalendar_google_style_css = css
989 1071 text-align: center;
990 1072 border-bottom-color: #20C
991 1073 }
992   - .CCalendar_google .monthly .day_hd {
  1074 + .CCalendar.google .monthly .day_hd {
993 1075 line-height: 16px;
994 1076 color: #666;
995 1077 background-color: #F8F9FF;
996 1078 text-align: right;
997 1079 padding-right: 2px;
998 1080 }
999   - .CCalendar_google .monthly .today .day_hd {
  1081 + .CCalendar.google .monthly .today .day_hd {
1000 1082 background-color: #FAD163
1001 1083 }
1002   - .CCalendar_google .monthly .inact .day_hd {
  1084 + .CCalendar.google .monthly .inact .day_hd {
1003 1085 color: #AAA
1004 1086 }
1005   - .CCalendar_google .monthly .events .event {
  1087 + .CCalendar.google .monthly .events .event {
1006 1088 display: block;
1007 1089 width: 100%;
1008 1090 border: none;
@@ -1014,17 +1096,17 @@ ccalendar_google_style_css = css
1014 1096 font-family: Verdana, sans-serif;
1015 1097 cursor: pointer;
1016 1098 }
1017   - .CCalendar_google .monthly .events .event.multiday {
  1099 + .CCalendar.google .monthly .events .event.multiday {
1018 1100 border-radius: 5px;
1019 1101 }
1020   - .CCalendar_google .monthly .events .event div {
  1102 + .CCalendar.google .monthly .events .event div {
1021 1103 overflow: hidden;
1022 1104 }
1023   - .CCalendar_google .monthly .events .event .time {
  1105 + .CCalendar.google .monthly .events .event .time {
1024 1106 font-family: Arial, sans-serif;
1025 1107 font-size: 10px;
1026 1108 font-weight: bold;
1027 1109 }
1028   - .CCalendar_google .monthly .events .event.over {
  1110 + .CCalendar.google .monthly .events .event.over {
1029 1111 opacity: .8;
1030 1112 }
3  stdlib/components/calendar/calendar_controls.opa
@@ -108,6 +108,9 @@ type CCalendarControls.config('event) =
108 108 </>
109 109 }
110 110
  111 + bootstrap_style_config =
  112 + extensible_style_config
  113 +
111 114 google_style_config =
112 115 {
113 116 generate(id, cal) =
1  stdlib/components/calendar/calendar_meshup.opa
@@ -134,5 +134,6 @@ ccalendar_meshup_css =
134 134 [ ccalendar_controls_css
135 135 , ccalendar_extensible_style_css
136 136 , ccalendar_google_style_css
  137 + , ccalendar_bootstrap_style_css
137 138 , default_resizable
138 139 ]

0 comments on commit f008678

Please sign in to comment.
Something went wrong with that request. Please try again.