fullcalendar.css 30 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404
  1. /*!
  2. * FullCalendar v3.1.0 Stylesheet
  3. * Docs & License: http://fullcalendar.io/
  4. * (c) 2016 Adam Shaw
  5. */
  6. .fc {
  7. direction: ltr;
  8. text-align: left;
  9. }
  10. .fc-rtl {
  11. text-align: right;
  12. }
  13. body .fc { /* extra precedence to overcome jqui */
  14. font-size: 1em;
  15. }
  16. /* Colors
  17. --------------------------------------------------------------------------------------------------*/
  18. .fc-unthemed th,
  19. .fc-unthemed td,
  20. .fc-unthemed thead,
  21. .fc-unthemed tbody,
  22. .fc-unthemed .fc-divider,
  23. .fc-unthemed .fc-row,
  24. .fc-unthemed .fc-content, /* for gutter border */
  25. .fc-unthemed .fc-popover,
  26. .fc-unthemed .fc-list-view,
  27. .fc-unthemed .fc-list-heading td {
  28. border-color: #ddd;
  29. }
  30. .fc-unthemed .fc-popover {
  31. background-color: #fff;
  32. }
  33. .fc-unthemed .fc-divider,
  34. .fc-unthemed .fc-popover .fc-header,
  35. .fc-unthemed .fc-list-heading td {
  36. background: #eee;
  37. }
  38. .fc-unthemed .fc-popover .fc-header .fc-close {
  39. color: #666;
  40. }
  41. .fc-unthemed td.fc-today {
  42. background: #fcf8e3;
  43. }
  44. .fc-highlight { /* when user is selecting cells */
  45. background: #bce8f1;
  46. opacity: .3;
  47. }
  48. .fc-bgevent { /* default look for background events */
  49. background: rgb(143, 223, 130);
  50. opacity: .3;
  51. }
  52. .fc-nonbusiness { /* default look for non-business-hours areas */
  53. /* will inherit .fc-bgevent's styles */
  54. background: #d7d7d7;
  55. }
  56. /* Icons (inline elements with styled text that mock arrow icons)
  57. --------------------------------------------------------------------------------------------------*/
  58. .fc-icon {
  59. display: inline-block;
  60. height: 1em;
  61. line-height: 1em;
  62. font-size: 1em;
  63. text-align: center;
  64. overflow: hidden;
  65. font-family: "Courier New", Courier, monospace;
  66. /* don't allow browser text-selection */
  67. -webkit-touch-callout: none;
  68. -webkit-user-select: none;
  69. -khtml-user-select: none;
  70. -moz-user-select: none;
  71. -ms-user-select: none;
  72. user-select: none;
  73. }
  74. /*
  75. Acceptable font-family overrides for individual icons:
  76. "Arial", sans-serif
  77. "Times New Roman", serif
  78. NOTE: use percentage font sizes or else old IE chokes
  79. */
  80. .fc-icon:after {
  81. position: relative;
  82. }
  83. .fc-icon-left-single-arrow:after {
  84. content: "\02039";
  85. font-weight: bold;
  86. font-size: 200%;
  87. top: -7%;
  88. }
  89. .fc-icon-right-single-arrow:after {
  90. content: "\0203A";
  91. font-weight: bold;
  92. font-size: 200%;
  93. top: -7%;
  94. }
  95. .fc-icon-left-double-arrow:after {
  96. content: "\000AB";
  97. font-size: 160%;
  98. top: -7%;
  99. }
  100. .fc-icon-right-double-arrow:after {
  101. content: "\000BB";
  102. font-size: 160%;
  103. top: -7%;
  104. }
  105. .fc-icon-left-triangle:after {
  106. content: "\25C4";
  107. font-size: 125%;
  108. top: 3%;
  109. }
  110. .fc-icon-right-triangle:after {
  111. content: "\25BA";
  112. font-size: 125%;
  113. top: 3%;
  114. }
  115. .fc-icon-down-triangle:after {
  116. content: "\25BC";
  117. font-size: 125%;
  118. top: 2%;
  119. }
  120. .fc-icon-x:after {
  121. content: "\000D7";
  122. font-size: 200%;
  123. top: 6%;
  124. }
  125. /* Buttons (styled <button> tags, normalized to work cross-browser)
  126. --------------------------------------------------------------------------------------------------*/
  127. .fc button {
  128. /* force height to include the border and padding */
  129. -moz-box-sizing: border-box;
  130. -webkit-box-sizing: border-box;
  131. box-sizing: border-box;
  132. /* dimensions */
  133. margin: 0;
  134. height: 2.1em;
  135. padding: 0 .6em;
  136. /* text & cursor */
  137. font-size: 1em; /* normalize */
  138. white-space: nowrap;
  139. cursor: pointer;
  140. }
  141. /* Firefox has an annoying inner border */
  142. .fc button::-moz-focus-inner { margin: 0; padding: 0; }
  143. .fc-state-default { /* non-theme */
  144. border: 1px solid;
  145. }
  146. .fc-state-default.fc-corner-left { /* non-theme */
  147. border-top-left-radius: 4px;
  148. border-bottom-left-radius: 4px;
  149. }
  150. .fc-state-default.fc-corner-right { /* non-theme */
  151. border-top-right-radius: 4px;
  152. border-bottom-right-radius: 4px;
  153. }
  154. /* icons in buttons */
  155. .fc button .fc-icon { /* non-theme */
  156. position: relative;
  157. top: -0.05em; /* seems to be a good adjustment across browsers */
  158. margin: 0 .2em;
  159. vertical-align: middle;
  160. }
  161. /*
  162. button states
  163. borrowed from twitter bootstrap (http://twitter.github.com/bootstrap/)
  164. */
  165. .fc-state-default {
  166. background-color: #f5f5f5;
  167. background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
  168. background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
  169. background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
  170. background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
  171. background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
  172. background-repeat: repeat-x;
  173. border-color: #e6e6e6 #e6e6e6 #bfbfbf;
  174. border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  175. color: #333;
  176. text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  177. box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  178. }
  179. .fc-state-hover,
  180. .fc-state-down,
  181. .fc-state-active,
  182. .fc-state-disabled {
  183. color: #333333;
  184. background-color: #e6e6e6;
  185. }
  186. .fc-state-hover {
  187. color: #333333;
  188. text-decoration: none;
  189. background-position: 0 -15px;
  190. -webkit-transition: background-position 0.1s linear;
  191. -moz-transition: background-position 0.1s linear;
  192. -o-transition: background-position 0.1s linear;
  193. transition: background-position 0.1s linear;
  194. }
  195. .fc-state-down,
  196. .fc-state-active {
  197. background-color: #cccccc;
  198. background-image: none;
  199. box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
  200. }
  201. .fc-state-disabled {
  202. cursor: default;
  203. background-image: none;
  204. opacity: 0.65;
  205. box-shadow: none;
  206. }
  207. /* Buttons Groups
  208. --------------------------------------------------------------------------------------------------*/
  209. .fc-button-group {
  210. display: inline-block;
  211. }
  212. /*
  213. every button that is not first in a button group should scootch over one pixel and cover the
  214. previous button's border...
  215. */
  216. .fc .fc-button-group > * { /* extra precedence b/c buttons have margin set to zero */
  217. float: left;
  218. margin: 0 0 0 -1px;
  219. }
  220. .fc .fc-button-group > :first-child { /* same */
  221. margin-left: 0;
  222. }
  223. /* Popover
  224. --------------------------------------------------------------------------------------------------*/
  225. .fc-popover {
  226. position: absolute;
  227. box-shadow: 0 2px 6px rgba(0,0,0,.15);
  228. }
  229. .fc-popover .fc-header { /* TODO: be more consistent with fc-head/fc-body */
  230. padding: 2px 4px;
  231. }
  232. .fc-popover .fc-header .fc-title {
  233. margin: 0 2px;
  234. }
  235. .fc-popover .fc-header .fc-close {
  236. cursor: pointer;
  237. }
  238. .fc-ltr .fc-popover .fc-header .fc-title,
  239. .fc-rtl .fc-popover .fc-header .fc-close {
  240. float: left;
  241. }
  242. .fc-rtl .fc-popover .fc-header .fc-title,
  243. .fc-ltr .fc-popover .fc-header .fc-close {
  244. float: right;
  245. }
  246. /* unthemed */
  247. .fc-unthemed .fc-popover {
  248. border-width: 1px;
  249. border-style: solid;
  250. }
  251. .fc-unthemed .fc-popover .fc-header .fc-close {
  252. font-size: .9em;
  253. margin-top: 2px;
  254. }
  255. /* jqui themed */
  256. .fc-popover > .ui-widget-header + .ui-widget-content {
  257. border-top: 0; /* where they meet, let the header have the border */
  258. }
  259. /* Misc Reusable Components
  260. --------------------------------------------------------------------------------------------------*/
  261. .fc-divider {
  262. border-style: solid;
  263. border-width: 1px;
  264. }
  265. hr.fc-divider {
  266. height: 0;
  267. margin: 0;
  268. padding: 0 0 2px; /* height is unreliable across browsers, so use padding */
  269. border-width: 1px 0;
  270. }
  271. .fc-clear {
  272. clear: both;
  273. }
  274. .fc-bg,
  275. .fc-bgevent-skeleton,
  276. .fc-highlight-skeleton,
  277. .fc-helper-skeleton {
  278. /* these element should always cling to top-left/right corners */
  279. position: absolute;
  280. top: 0;
  281. left: 0;
  282. right: 0;
  283. }
  284. .fc-bg {
  285. bottom: 0; /* strech bg to bottom edge */
  286. }
  287. .fc-bg table {
  288. height: 100%; /* strech bg to bottom edge */
  289. }
  290. /* Tables
  291. --------------------------------------------------------------------------------------------------*/
  292. .fc table {
  293. width: 100%;
  294. box-sizing: border-box; /* fix scrollbar issue in firefox */
  295. table-layout: fixed;
  296. border-collapse: collapse;
  297. border-spacing: 0;
  298. font-size: 1em; /* normalize cross-browser */
  299. }
  300. .fc th {
  301. text-align: center;
  302. }
  303. .fc th,
  304. .fc td {
  305. border-style: solid;
  306. border-width: 1px;
  307. padding: 0;
  308. vertical-align: top;
  309. }
  310. .fc td.fc-today {
  311. border-style: double; /* overcome neighboring borders */
  312. }
  313. /* Internal Nav Links
  314. --------------------------------------------------------------------------------------------------*/
  315. a[data-goto] {
  316. cursor: pointer;
  317. }
  318. a[data-goto]:hover {
  319. text-decoration: underline;
  320. }
  321. /* Fake Table Rows
  322. --------------------------------------------------------------------------------------------------*/
  323. .fc .fc-row { /* extra precedence to overcome themes w/ .ui-widget-content forcing a 1px border */
  324. /* no visible border by default. but make available if need be (scrollbar width compensation) */
  325. border-style: solid;
  326. border-width: 0;
  327. }
  328. .fc-row table {
  329. /* don't put left/right border on anything within a fake row.
  330. the outer tbody will worry about this */
  331. border-left: 0 hidden transparent;
  332. border-right: 0 hidden transparent;
  333. /* no bottom borders on rows */
  334. border-bottom: 0 hidden transparent;
  335. }
  336. .fc-row:first-child table {
  337. border-top: 0 hidden transparent; /* no top border on first row */
  338. }
  339. /* Day Row (used within the header and the DayGrid)
  340. --------------------------------------------------------------------------------------------------*/
  341. .fc-row {
  342. position: relative;
  343. }
  344. .fc-row .fc-bg {
  345. z-index: 1;
  346. }
  347. /* highlighting cells & background event skeleton */
  348. .fc-row .fc-bgevent-skeleton,
  349. .fc-row .fc-highlight-skeleton {
  350. bottom: 0; /* stretch skeleton to bottom of row */
  351. }
  352. .fc-row .fc-bgevent-skeleton table,
  353. .fc-row .fc-highlight-skeleton table {
  354. height: 100%; /* stretch skeleton to bottom of row */
  355. }
  356. .fc-row .fc-highlight-skeleton td,
  357. .fc-row .fc-bgevent-skeleton td {
  358. border-color: transparent;
  359. }
  360. .fc-row .fc-bgevent-skeleton {
  361. z-index: 2;
  362. }
  363. .fc-row .fc-highlight-skeleton {
  364. z-index: 3;
  365. }
  366. /*
  367. row content (which contains day/week numbers and events) as well as "helper" (which contains
  368. temporary rendered events).
  369. */
  370. .fc-row .fc-content-skeleton {
  371. position: relative;
  372. z-index: 4;
  373. padding-bottom: 2px; /* matches the space above the events */
  374. }
  375. .fc-row .fc-helper-skeleton {
  376. z-index: 5;
  377. }
  378. .fc-row .fc-content-skeleton td,
  379. .fc-row .fc-helper-skeleton td {
  380. /* see-through to the background below */
  381. background: none; /* in case <td>s are globally styled */
  382. border-color: transparent;
  383. /* don't put a border between events and/or the day number */
  384. border-bottom: 0;
  385. }
  386. .fc-row .fc-content-skeleton tbody td, /* cells with events inside (so NOT the day number cell) */
  387. .fc-row .fc-helper-skeleton tbody td {
  388. /* don't put a border between event cells */
  389. border-top: 0;
  390. }
  391. /* Scrolling Container
  392. --------------------------------------------------------------------------------------------------*/
  393. .fc-scroller {
  394. -webkit-overflow-scrolling: touch;
  395. }
  396. /* TODO: move to agenda/basic */
  397. .fc-scroller > .fc-day-grid,
  398. .fc-scroller > .fc-time-grid {
  399. position: relative; /* re-scope all positions */
  400. width: 100%; /* hack to force re-sizing this inner element when scrollbars appear/disappear */
  401. }
  402. /* Global Event Styles
  403. --------------------------------------------------------------------------------------------------*/
  404. .fc-event {
  405. position: relative; /* for resize handle and other inner positioning */
  406. display: block; /* make the <a> tag block */
  407. font-size: .85em;
  408. line-height: 1.3;
  409. border-radius: 3px;
  410. border: 1px solid #3a87ad; /* default BORDER color */
  411. font-weight: normal; /* undo jqui's ui-widget-header bold */
  412. }
  413. .fc-event,
  414. .fc-event-dot {
  415. background-color: #3a87ad; /* default BACKGROUND color */
  416. }
  417. /* overpower some of bootstrap's and jqui's styles on <a> tags */
  418. .fc-event,
  419. .fc-event:hover,
  420. .ui-widget .fc-event {
  421. color: #fff; /* default TEXT color */
  422. text-decoration: none; /* if <a> has an href */
  423. }
  424. .fc-event[href],
  425. .fc-event.fc-draggable {
  426. cursor: pointer; /* give events with links and draggable events a hand mouse pointer */
  427. }
  428. .fc-not-allowed, /* causes a "warning" cursor. applied on body */
  429. .fc-not-allowed .fc-event { /* to override an event's custom cursor */
  430. cursor: not-allowed;
  431. }
  432. .fc-event .fc-bg { /* the generic .fc-bg already does position */
  433. z-index: 1;
  434. background: #fff;
  435. opacity: .25;
  436. }
  437. .fc-event .fc-content {
  438. position: relative;
  439. z-index: 2;
  440. }
  441. /* resizer (cursor AND touch devices) */
  442. .fc-event .fc-resizer {
  443. position: absolute;
  444. z-index: 4;
  445. }
  446. /* resizer (touch devices) */
  447. .fc-event .fc-resizer {
  448. display: none;
  449. }
  450. .fc-event.fc-allow-mouse-resize .fc-resizer,
  451. .fc-event.fc-selected .fc-resizer {
  452. /* only show when hovering or selected (with touch) */
  453. display: block;
  454. }
  455. /* hit area */
  456. .fc-event.fc-selected .fc-resizer:before {
  457. /* 40x40 touch area */
  458. content: "";
  459. position: absolute;
  460. z-index: 9999; /* user of this util can scope within a lower z-index */
  461. top: 50%;
  462. left: 50%;
  463. width: 40px;
  464. height: 40px;
  465. margin-left: -20px;
  466. margin-top: -20px;
  467. }
  468. /* Event Selection (only for touch devices)
  469. --------------------------------------------------------------------------------------------------*/
  470. .fc-event.fc-selected {
  471. z-index: 9999 !important; /* overcomes inline z-index */
  472. box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  473. }
  474. .fc-event.fc-selected.fc-dragging {
  475. box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
  476. }
  477. /* Horizontal Events
  478. --------------------------------------------------------------------------------------------------*/
  479. /* bigger touch area when selected */
  480. .fc-h-event.fc-selected:before {
  481. content: "";
  482. position: absolute;
  483. z-index: 3; /* below resizers */
  484. top: -10px;
  485. bottom: -10px;
  486. left: 0;
  487. right: 0;
  488. }
  489. /* events that are continuing to/from another week. kill rounded corners and butt up against edge */
  490. .fc-ltr .fc-h-event.fc-not-start,
  491. .fc-rtl .fc-h-event.fc-not-end {
  492. margin-left: 0;
  493. border-left-width: 0;
  494. padding-left: 1px; /* replace the border with padding */
  495. border-top-left-radius: 0;
  496. border-bottom-left-radius: 0;
  497. }
  498. .fc-ltr .fc-h-event.fc-not-end,
  499. .fc-rtl .fc-h-event.fc-not-start {
  500. margin-right: 0;
  501. border-right-width: 0;
  502. padding-right: 1px; /* replace the border with padding */
  503. border-top-right-radius: 0;
  504. border-bottom-right-radius: 0;
  505. }
  506. /* resizer (cursor AND touch devices) */
  507. /* left resizer */
  508. .fc-ltr .fc-h-event .fc-start-resizer,
  509. .fc-rtl .fc-h-event .fc-end-resizer {
  510. cursor: w-resize;
  511. left: -1px; /* overcome border */
  512. }
  513. /* right resizer */
  514. .fc-ltr .fc-h-event .fc-end-resizer,
  515. .fc-rtl .fc-h-event .fc-start-resizer {
  516. cursor: e-resize;
  517. right: -1px; /* overcome border */
  518. }
  519. /* resizer (mouse devices) */
  520. .fc-h-event.fc-allow-mouse-resize .fc-resizer {
  521. width: 7px;
  522. top: -1px; /* overcome top border */
  523. bottom: -1px; /* overcome bottom border */
  524. }
  525. /* resizer (touch devices) */
  526. .fc-h-event.fc-selected .fc-resizer {
  527. /* 8x8 little dot */
  528. border-radius: 4px;
  529. border-width: 1px;
  530. width: 6px;
  531. height: 6px;
  532. border-style: solid;
  533. border-color: inherit;
  534. background: #fff;
  535. /* vertically center */
  536. top: 50%;
  537. margin-top: -4px;
  538. }
  539. /* left resizer */
  540. .fc-ltr .fc-h-event.fc-selected .fc-start-resizer,
  541. .fc-rtl .fc-h-event.fc-selected .fc-end-resizer {
  542. margin-left: -4px; /* centers the 8x8 dot on the left edge */
  543. }
  544. /* right resizer */
  545. .fc-ltr .fc-h-event.fc-selected .fc-end-resizer,
  546. .fc-rtl .fc-h-event.fc-selected .fc-start-resizer {
  547. margin-right: -4px; /* centers the 8x8 dot on the right edge */
  548. }
  549. /* DayGrid events
  550. ----------------------------------------------------------------------------------------------------
  551. We use the full "fc-day-grid-event" class instead of using descendants because the event won't
  552. be a descendant of the grid when it is being dragged.
  553. */
  554. .fc-day-grid-event {
  555. margin: 1px 2px 0; /* spacing between events and edges */
  556. padding: 0 1px;
  557. }
  558. tr:first-child > td > .fc-day-grid-event {
  559. margin-top: 2px; /* a little bit more space before the first event */
  560. }
  561. .fc-day-grid-event.fc-selected:after {
  562. content: "";
  563. position: absolute;
  564. z-index: 1; /* same z-index as fc-bg, behind text */
  565. /* overcome the borders */
  566. top: -1px;
  567. right: -1px;
  568. bottom: -1px;
  569. left: -1px;
  570. /* darkening effect */
  571. background: #000;
  572. opacity: .25;
  573. }
  574. .fc-day-grid-event .fc-content { /* force events to be one-line tall */
  575. white-space: nowrap;
  576. overflow: hidden;
  577. }
  578. .fc-day-grid-event .fc-time {
  579. font-weight: bold;
  580. }
  581. /* resizer (cursor devices) */
  582. /* left resizer */
  583. .fc-ltr .fc-day-grid-event.fc-allow-mouse-resize .fc-start-resizer,
  584. .fc-rtl .fc-day-grid-event.fc-allow-mouse-resize .fc-end-resizer {
  585. margin-left: -2px; /* to the day cell's edge */
  586. }
  587. /* right resizer */
  588. .fc-ltr .fc-day-grid-event.fc-allow-mouse-resize .fc-end-resizer,
  589. .fc-rtl .fc-day-grid-event.fc-allow-mouse-resize .fc-start-resizer {
  590. margin-right: -2px; /* to the day cell's edge */
  591. }
  592. /* Event Limiting
  593. --------------------------------------------------------------------------------------------------*/
  594. /* "more" link that represents hidden events */
  595. a.fc-more {
  596. margin: 1px 3px;
  597. font-size: .85em;
  598. cursor: pointer;
  599. text-decoration: none;
  600. }
  601. a.fc-more:hover {
  602. text-decoration: underline;
  603. }
  604. .fc-limited { /* rows and cells that are hidden because of a "more" link */
  605. display: none;
  606. }
  607. /* popover that appears when "more" link is clicked */
  608. .fc-day-grid .fc-row {
  609. z-index: 1; /* make the "more" popover one higher than this */
  610. }
  611. .fc-more-popover {
  612. z-index: 2;
  613. width: 220px;
  614. }
  615. .fc-more-popover .fc-event-container {
  616. padding: 10px;
  617. }
  618. /* Now Indicator
  619. --------------------------------------------------------------------------------------------------*/
  620. .fc-now-indicator {
  621. position: absolute;
  622. border: 0 solid red;
  623. }
  624. /* Utilities
  625. --------------------------------------------------------------------------------------------------*/
  626. .fc-unselectable {
  627. -webkit-user-select: none;
  628. -khtml-user-select: none;
  629. -moz-user-select: none;
  630. -ms-user-select: none;
  631. user-select: none;
  632. -webkit-touch-callout: none;
  633. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  634. }
  635. /* Toolbar
  636. --------------------------------------------------------------------------------------------------*/
  637. .fc-toolbar {
  638. text-align: center;
  639. }
  640. .fc-toolbar.fc-header-toolbar {
  641. margin-bottom: 1em;
  642. }
  643. .fc-toolbar.fc-footer-toolbar {
  644. margin-top: 1em;
  645. }
  646. .fc-toolbar .fc-left {
  647. float: left;
  648. }
  649. .fc-toolbar .fc-right {
  650. float: right;
  651. }
  652. .fc-toolbar .fc-center {
  653. display: inline-block;
  654. }
  655. /* the things within each left/right/center section */
  656. .fc .fc-toolbar > * > * { /* extra precedence to override button border margins */
  657. float: left;
  658. margin-left: .75em;
  659. }
  660. /* the first thing within each left/center/right section */
  661. .fc .fc-toolbar > * > :first-child { /* extra precedence to override button border margins */
  662. margin-left: 0;
  663. }
  664. /* title text */
  665. .fc-toolbar h2 {
  666. margin: 0;
  667. }
  668. /* button layering (for border precedence) */
  669. .fc-toolbar button {
  670. position: relative;
  671. }
  672. .fc-toolbar .fc-state-hover,
  673. .fc-toolbar .ui-state-hover {
  674. z-index: 2;
  675. }
  676. .fc-toolbar .fc-state-down {
  677. z-index: 3;
  678. }
  679. .fc-toolbar .fc-state-active,
  680. .fc-toolbar .ui-state-active {
  681. z-index: 4;
  682. }
  683. .fc-toolbar button:focus {
  684. z-index: 5;
  685. }
  686. /* View Structure
  687. --------------------------------------------------------------------------------------------------*/
  688. /* undo twitter bootstrap's box-sizing rules. normalizes positioning techniques */
  689. /* don't do this for the toolbar because we'll want bootstrap to style those buttons as some pt */
  690. .fc-view-container *,
  691. .fc-view-container *:before,
  692. .fc-view-container *:after {
  693. -webkit-box-sizing: content-box;
  694. -moz-box-sizing: content-box;
  695. box-sizing: content-box;
  696. }
  697. .fc-view, /* scope positioning and z-index's for everything within the view */
  698. .fc-view > table { /* so dragged elements can be above the view's main element */
  699. position: relative;
  700. z-index: 1;
  701. }
  702. /* BasicView
  703. --------------------------------------------------------------------------------------------------*/
  704. /* day row structure */
  705. .fc-basicWeek-view .fc-content-skeleton,
  706. .fc-basicDay-view .fc-content-skeleton {
  707. /* there may be week numbers in these views, so no padding-top */
  708. padding-bottom: 1em; /* ensure a space at bottom of cell for user selecting/clicking */
  709. }
  710. .fc-basic-view .fc-body .fc-row {
  711. min-height: 4em; /* ensure that all rows are at least this tall */
  712. }
  713. /* a "rigid" row will take up a constant amount of height because content-skeleton is absolute */
  714. .fc-row.fc-rigid {
  715. overflow: hidden;
  716. }
  717. .fc-row.fc-rigid .fc-content-skeleton {
  718. position: absolute;
  719. top: 0;
  720. left: 0;
  721. right: 0;
  722. }
  723. /* week and day number styling */
  724. .fc-day-top.fc-other-month {
  725. opacity: 0.3;
  726. }
  727. .fc-basic-view .fc-week-number,
  728. .fc-basic-view .fc-day-number {
  729. padding: 2px;
  730. }
  731. .fc-basic-view th.fc-week-number,
  732. .fc-basic-view th.fc-day-number {
  733. padding: 0 2px; /* column headers can't have as much v space */
  734. }
  735. .fc-ltr .fc-basic-view .fc-day-top .fc-day-number { float: right; }
  736. .fc-rtl .fc-basic-view .fc-day-top .fc-day-number { float: left; }
  737. .fc-ltr .fc-basic-view .fc-day-top .fc-week-number { float: left; border-radius: 0 0 3px 0; }
  738. .fc-rtl .fc-basic-view .fc-day-top .fc-week-number { float: right; border-radius: 0 0 0 3px; }
  739. .fc-basic-view .fc-day-top .fc-week-number {
  740. min-width: 1.5em;
  741. text-align: center;
  742. background-color: #f2f2f2;
  743. color: #808080;
  744. }
  745. /* when week/day number have own column */
  746. .fc-basic-view td.fc-week-number {
  747. text-align: center;
  748. }
  749. .fc-basic-view td.fc-week-number > * {
  750. /* work around the way we do column resizing and ensure a minimum width */
  751. display: inline-block;
  752. min-width: 1.25em;
  753. }
  754. /* AgendaView all-day area
  755. --------------------------------------------------------------------------------------------------*/
  756. .fc-agenda-view .fc-day-grid {
  757. position: relative;
  758. z-index: 2; /* so the "more.." popover will be over the time grid */
  759. }
  760. .fc-agenda-view .fc-day-grid .fc-row {
  761. min-height: 3em; /* all-day section will never get shorter than this */
  762. }
  763. .fc-agenda-view .fc-day-grid .fc-row .fc-content-skeleton {
  764. padding-bottom: 1em; /* give space underneath events for clicking/selecting days */
  765. }
  766. /* TimeGrid axis running down the side (for both the all-day area and the slot area)
  767. --------------------------------------------------------------------------------------------------*/
  768. .fc .fc-axis { /* .fc to overcome default cell styles */
  769. vertical-align: middle;
  770. padding: 0 4px;
  771. white-space: nowrap;
  772. }
  773. .fc-ltr .fc-axis {
  774. text-align: right;
  775. }
  776. .fc-rtl .fc-axis {
  777. text-align: left;
  778. }
  779. .ui-widget td.fc-axis {
  780. font-weight: normal; /* overcome jqui theme making it bold */
  781. }
  782. /* TimeGrid Structure
  783. --------------------------------------------------------------------------------------------------*/
  784. .fc-time-grid-container, /* so scroll container's z-index is below all-day */
  785. .fc-time-grid { /* so slats/bg/content/etc positions get scoped within here */
  786. position: relative;
  787. z-index: 1;
  788. }
  789. .fc-time-grid {
  790. min-height: 100%; /* so if height setting is 'auto', .fc-bg stretches to fill height */
  791. }
  792. .fc-time-grid table { /* don't put outer borders on slats/bg/content/etc */
  793. border: 0 hidden transparent;
  794. }
  795. .fc-time-grid > .fc-bg {
  796. z-index: 1;
  797. }
  798. .fc-time-grid .fc-slats,
  799. .fc-time-grid > hr { /* the <hr> AgendaView injects when grid is shorter than scroller */
  800. position: relative;
  801. z-index: 2;
  802. }
  803. .fc-time-grid .fc-content-col {
  804. position: relative; /* because now-indicator lives directly inside */
  805. }
  806. .fc-time-grid .fc-content-skeleton {
  807. position: absolute;
  808. z-index: 3;
  809. top: 0;
  810. left: 0;
  811. right: 0;
  812. }
  813. /* divs within a cell within the fc-content-skeleton */
  814. .fc-time-grid .fc-business-container {
  815. position: relative;
  816. z-index: 1;
  817. }
  818. .fc-time-grid .fc-bgevent-container {
  819. position: relative;
  820. z-index: 2;
  821. }
  822. .fc-time-grid .fc-highlight-container {
  823. position: relative;
  824. z-index: 3;
  825. }
  826. .fc-time-grid .fc-event-container {
  827. position: relative;
  828. z-index: 4;
  829. }
  830. .fc-time-grid .fc-now-indicator-line {
  831. z-index: 5;
  832. }
  833. .fc-time-grid .fc-helper-container { /* also is fc-event-container */
  834. position: relative;
  835. z-index: 6;
  836. }
  837. /* TimeGrid Slats (lines that run horizontally)
  838. --------------------------------------------------------------------------------------------------*/
  839. .fc-time-grid .fc-slats td {
  840. height: 1.5em;
  841. border-bottom: 0; /* each cell is responsible for its top border */
  842. }
  843. .fc-time-grid .fc-slats .fc-minor td {
  844. border-top-style: dotted;
  845. }
  846. .fc-time-grid .fc-slats .ui-widget-content { /* for jqui theme */
  847. background: none; /* see through to fc-bg */
  848. }
  849. /* TimeGrid Highlighting Slots
  850. --------------------------------------------------------------------------------------------------*/
  851. .fc-time-grid .fc-highlight-container { /* a div within a cell within the fc-highlight-skeleton */
  852. position: relative; /* scopes the left/right of the fc-highlight to be in the column */
  853. }
  854. .fc-time-grid .fc-highlight {
  855. position: absolute;
  856. left: 0;
  857. right: 0;
  858. /* top and bottom will be in by JS */
  859. }
  860. /* TimeGrid Event Containment
  861. --------------------------------------------------------------------------------------------------*/
  862. .fc-ltr .fc-time-grid .fc-event-container { /* space on the sides of events for LTR (default) */
  863. margin: 0 2.5% 0 2px;
  864. }
  865. .fc-rtl .fc-time-grid .fc-event-container { /* space on the sides of events for RTL */
  866. margin: 0 2px 0 2.5%;
  867. }
  868. .fc-time-grid .fc-event,
  869. .fc-time-grid .fc-bgevent {
  870. position: absolute;
  871. z-index: 1; /* scope inner z-index's */
  872. }
  873. .fc-time-grid .fc-bgevent {
  874. /* background events always span full width */
  875. left: 0;
  876. right: 0;
  877. }
  878. /* Generic Vertical Event
  879. --------------------------------------------------------------------------------------------------*/
  880. .fc-v-event.fc-not-start { /* events that are continuing from another day */
  881. /* replace space made by the top border with padding */
  882. border-top-width: 0;
  883. padding-top: 1px;
  884. /* remove top rounded corners */
  885. border-top-left-radius: 0;
  886. border-top-right-radius: 0;
  887. }
  888. .fc-v-event.fc-not-end {
  889. /* replace space made by the top border with padding */
  890. border-bottom-width: 0;
  891. padding-bottom: 1px;
  892. /* remove bottom rounded corners */
  893. border-bottom-left-radius: 0;
  894. border-bottom-right-radius: 0;
  895. }
  896. /* TimeGrid Event Styling
  897. ----------------------------------------------------------------------------------------------------
  898. We use the full "fc-time-grid-event" class instead of using descendants because the event won't
  899. be a descendant of the grid when it is being dragged.
  900. */
  901. .fc-time-grid-event {
  902. overflow: hidden; /* don't let the bg flow over rounded corners */
  903. }
  904. .fc-time-grid-event.fc-selected {
  905. /* need to allow touch resizers to extend outside event's bounding box */
  906. /* common fc-selected styles hide the fc-bg, so don't need this anyway */
  907. overflow: visible;
  908. }
  909. .fc-time-grid-event.fc-selected .fc-bg {
  910. display: none; /* hide semi-white background, to appear darker */
  911. }
  912. .fc-time-grid-event .fc-content {
  913. overflow: hidden; /* for when .fc-selected */
  914. }
  915. .fc-time-grid-event .fc-time,
  916. .fc-time-grid-event .fc-title {
  917. padding: 0 1px;
  918. }
  919. .fc-time-grid-event .fc-time {
  920. font-size: .85em;
  921. white-space: nowrap;
  922. }
  923. /* short mode, where time and title are on the same line */
  924. .fc-time-grid-event.fc-short .fc-content {
  925. /* don't wrap to second line (now that contents will be inline) */
  926. white-space: nowrap;
  927. }
  928. .fc-time-grid-event.fc-short .fc-time,
  929. .fc-time-grid-event.fc-short .fc-title {
  930. /* put the time and title on the same line */
  931. display: inline-block;
  932. vertical-align: top;
  933. }
  934. .fc-time-grid-event.fc-short .fc-time span {
  935. display: none; /* don't display the full time text... */
  936. }
  937. .fc-time-grid-event.fc-short .fc-time:before {
  938. content: attr(data-start); /* ...instead, display only the start time */
  939. }
  940. .fc-time-grid-event.fc-short .fc-time:after {
  941. content: "\000A0-\000A0"; /* seperate with a dash, wrapped in nbsp's */
  942. }
  943. .fc-time-grid-event.fc-short .fc-title {
  944. font-size: .85em; /* make the title text the same size as the time */
  945. padding: 0; /* undo padding from above */
  946. }
  947. /* resizer (cursor device) */
  948. .fc-time-grid-event.fc-allow-mouse-resize .fc-resizer {
  949. left: 0;
  950. right: 0;
  951. bottom: 0;
  952. height: 8px;
  953. overflow: hidden;
  954. line-height: 8px;
  955. font-size: 11px;
  956. font-family: monospace;
  957. text-align: center;
  958. cursor: s-resize;
  959. }
  960. .fc-time-grid-event.fc-allow-mouse-resize .fc-resizer:after {
  961. content: "=";
  962. }
  963. /* resizer (touch device) */
  964. .fc-time-grid-event.fc-selected .fc-resizer {
  965. /* 10x10 dot */
  966. border-radius: 5px;
  967. border-width: 1px;
  968. width: 8px;
  969. height: 8px;
  970. border-style: solid;
  971. border-color: inherit;
  972. background: #fff;
  973. /* horizontally center */
  974. left: 50%;
  975. margin-left: -5px;
  976. /* center on the bottom edge */
  977. bottom: -5px;
  978. }
  979. /* Now Indicator
  980. --------------------------------------------------------------------------------------------------*/
  981. .fc-time-grid .fc-now-indicator-line {
  982. border-top-width: 1px;
  983. left: 0;
  984. right: 0;
  985. }
  986. /* arrow on axis */
  987. .fc-time-grid .fc-now-indicator-arrow {
  988. margin-top: -5px; /* vertically center on top coordinate */
  989. }
  990. .fc-ltr .fc-time-grid .fc-now-indicator-arrow {
  991. left: 0;
  992. /* triangle pointing right... */
  993. border-width: 5px 0 5px 6px;
  994. border-top-color: transparent;
  995. border-bottom-color: transparent;
  996. }
  997. .fc-rtl .fc-time-grid .fc-now-indicator-arrow {
  998. right: 0;
  999. /* triangle pointing left... */
  1000. border-width: 5px 6px 5px 0;
  1001. border-top-color: transparent;
  1002. border-bottom-color: transparent;
  1003. }
  1004. /* List View
  1005. --------------------------------------------------------------------------------------------------*/
  1006. /* possibly reusable */
  1007. .fc-event-dot {
  1008. display: inline-block;
  1009. width: 10px;
  1010. height: 10px;
  1011. border-radius: 5px;
  1012. }
  1013. /* view wrapper */
  1014. .fc-rtl .fc-list-view {
  1015. direction: rtl; /* unlike core views, leverage browser RTL */
  1016. }
  1017. .fc-list-view {
  1018. border-width: 1px;
  1019. border-style: solid;
  1020. }
  1021. /* table resets */
  1022. .fc .fc-list-table {
  1023. table-layout: auto; /* for shrinkwrapping cell content */
  1024. }
  1025. .fc-list-table td {
  1026. border-width: 1px 0 0;
  1027. padding: 8px 14px;
  1028. }
  1029. .fc-list-table tr:first-child td {
  1030. border-top-width: 0;
  1031. }
  1032. /* day headings with the list */
  1033. .fc-list-heading {
  1034. border-bottom-width: 1px;
  1035. }
  1036. .fc-list-heading td {
  1037. font-weight: bold;
  1038. }
  1039. .fc-ltr .fc-list-heading-main { float: left; }
  1040. .fc-ltr .fc-list-heading-alt { float: right; }
  1041. .fc-rtl .fc-list-heading-main { float: right; }
  1042. .fc-rtl .fc-list-heading-alt { float: left; }
  1043. /* event list items */
  1044. .fc-list-item.fc-has-url {
  1045. cursor: pointer; /* whole row will be clickable */
  1046. }
  1047. .fc-list-item:hover td {
  1048. background-color: #f5f5f5;
  1049. }
  1050. .fc-list-item-marker,
  1051. .fc-list-item-time {
  1052. white-space: nowrap;
  1053. width: 1px;
  1054. }
  1055. /* make the dot closer to the event title */
  1056. .fc-ltr .fc-list-item-marker { padding-right: 0; }
  1057. .fc-rtl .fc-list-item-marker { padding-left: 0; }
  1058. .fc-list-item-title a {
  1059. /* every event title cell has an <a> tag */
  1060. text-decoration: none;
  1061. color: inherit;
  1062. }
  1063. .fc-list-item-title a[href]:hover {
  1064. /* hover effect only on titles with hrefs */
  1065. text-decoration: underline;
  1066. }
  1067. /* message when no events */
  1068. .fc-list-empty-wrap2 {
  1069. position: absolute;
  1070. top: 0;
  1071. left: 0;
  1072. right: 0;
  1073. bottom: 0;
  1074. }
  1075. .fc-list-empty-wrap1 {
  1076. width: 100%;
  1077. height: 100%;
  1078. display: table;
  1079. }
  1080. .fc-list-empty {
  1081. display: table-cell;
  1082. vertical-align: middle;
  1083. text-align: center;
  1084. }
  1085. .fc-unthemed .fc-list-empty { /* theme will provide own background */
  1086. background-color: #eee;
  1087. }