fullcalendar.css 28 KB

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