Calendar Graphical

  1. /* graphical - event list */
  2. .eventsCalendar table {
  3. border: none;
  4. border-color: #fff;
  5. width: 100%;
  6. border-collapse: collapse;
  7. }
  8. .calendarDay,
  9. .calendarToday,
  10. .calendarDayHeader,
  11. .calendarTitle td,
  12. .calendarWeekendDay,
  13. .calendarOtherMonthDay {
  14. padding: 2px;
  15. border: 1px solid #fff;
  16. text-align: center;
  17. vertical-align: top;
  18. background: #fff !important;
  19. padding: 5px;
  20. border-bottom: 1px solid #f4f4f4;
  21. }
  22. /* top bar with current month and next/previous buttons */
  23. .calendarTitle td {
  24. text-align: center;
  25. color: #fff !important;
  26. font-weight: bold !important;
  27. background: #000 !important;
  28. font-size: 12px;
  29. line-height: 16px;
  30. text-transform: uppercase;
  31. letter-spacing: 2px;
  32. height: 27px;
  33. }
  34. .calendarNextPrevious {
  35. color: #fff !important;
  36. font-weight: bold;
  37. padding: 0 !important;
  38. }
  39. .calendarNextPrevious a {
  40. color: #fff !important;
  41. }
  42. /* next/previous arrows */
  43. .calendarNextPrevious a[title="Go to the previous month"] {
  44. display: block;
  45. background: url(images/icon-arrow-left.gif) 0 0 no-repeat;
  46. text-indent: -9999px;
  47. border: 0;
  48. height: 27px;
  49. }
  50. .calendarNextPrevious a[title="Go to the next month"] {
  51. display: block;
  52. background: url(images/icon-arrow-right.gif) 100% 0 no-repeat;
  53. text-indent: -9999px;
  54. border: 0;
  55. height: 27px;
  56. }
  57. /* m-f bar */
  58. .calendarDayHeader {
  59. color: #000;
  60. background: #fff;
  61. font-weight: bold;
  62. text-align: center;
  63. padding: 4px 2px;
  64. text-transform: uppercase;
  65. border-bottom: 1px solid #f4f4f4;
  66. }
  67. /* current day */
  68. .calendarToday,
  69. .calendarToday a {
  70. font-weight: bold;
  71. }
  72. /* weekends */
  73. .calendarWeekendDay {
  74. color: #898989 !important;
  75. }
  76. .calendarDay {
  77. color: #898989 !important;
  78. }
  79. /* previous or next months days on current months calendar */
  80. .calendarOtherMonthDay {
  81. color: #898989;
  82. }

Common Questions

Back to top