fullcalendar.css 30 KB

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