vue-simple-calendar/static/css/default.css

Simple Vue 3 calendar event control

/*
**************************************************************
This theme is the default shipping theme, it includes some
decent defaults, but is separate from the calendar component
to make it easier for users to implement their own themes w/o
having to override as much.
**************************************************************
*/

/* Header */

.theme-default .cv-header,
.theme-default .cv-header-day {
	background-color: #f0f0f0;
}

.theme-default .cv-header .periodLabel {
	font-size: 1.5em;
}

.theme-default .cv-header button {
	color: #7f7f7f;
}

.theme-default .cv-header button:disabled {
	color: #ccc;
	background-color: #f7f7f7;
}

/* Grid */

.theme-default .cv-weeknumber {
	background-color: #e0e0e0;
	border-color: #ccc;
	color: #808080;
}

.theme-default .cv-weeknumber span {
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.theme-default .cv-day.past {
	background-color: #fafafa;
}

.theme-default .cv-day.outsideOfMonth {
	background-color: #f7f7f7;
}

.theme-default .cv-day.today {
	background-color: #ffe;
}

.theme-default .cv-day[aria-selected="true"] {
	background-color: #ffc;
}

/* Events */

.theme-default .cv-item {
	border-color: #e0e0f0;
	border-radius: 0.5em;
	background-color: #e7e7ff;
	text-overflow: ellipsis;
}

.theme-default .cv-item.purple {
	background-color: #f0e0ff;
	border-color: #e7d7f7;
}

.theme-default .cv-item.orange {
	background-color: #ffe7d0;
	border-color: #f7e0c7;
}

.theme-default .cv-item.continued::before,
.theme-default .cv-item.toBeContinued::after {
	content: " \21e2 ";
	color: #999;
}

.theme-default .cv-item.toBeContinued {
	border-right-style: none;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.theme-default .cv-item.isHovered.hasUrl {
	text-decoration: underline;
}

.theme-default .cv-item.continued {
	border-left-style: none;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.cv-item.span3,
.cv-item.span4,
.cv-item.span5,
.cv-item.span6,
.cv-item.span7 {
	text-align: center;
}

/* Event Times */

.theme-default .cv-item .startTime,
.theme-default .cv-item .endTime {
	font-weight: bold;
	color: #666;
}

/* Drag and drop */

.theme-default .cv-day.draghover {
	box-shadow: inset 0 0 0.2em 0.2em yellow;
}