Spruha - Bootstrap Premium HTML Dashboard Template

Card

A card is a flexible and extensible content container.General Card HTML structure in Spruha template.

	
		
			<div class="card custom-card">
				<div class="card-header custom-card-header border-bottom-0 ">
					<h5 class="main-content-label tx-dark my-auto tx-medium mb-0">Basic Card</h5>
					<div class="card-options">
						<a href="#" class="card-options-collapse" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
						<a href="#" class="card-options-remove" data-bs-toggle="card-remove"><i class="fe fe-x"></i></a>
					</div>
				</div>
				<div class="card-body">
				  Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet									</div>
				<div class="card-footer">
					This is Basic card footer
				</div>
			</div>
		
	
Calendar

This template using FullCalendar & Calendar .

FullCalendar is Taken from Full Calendar Plugin which is great for displaying events, FullCalendar is a flexible event calendar plugin to display events in a responsive, modern-looking calendar interface.

	
		

			<div class="row" id="wrap">
				<div class="col-xl-2" id="external-events">
					<h4>Draggable Events</h4>
					<div id="external-events-list">
						<div class="fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event">
							<div class="fc-event-main">My Event 1</div>
						</div>
						<div class="fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event">
							<div class="fc-event-main">My Event 2</div>
						</div>
						<div class="fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event">
							<div class="fc-event-main">My Event 3</div>
						</div>
						<div class="fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event">
							<div class="fc-event-main">My Event 4</div>
						</div>
						<div class="fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event">
							<div class="fc-event-main">My Event 5</div>
						</div>
					</div>
					<p>
						<input type="checkbox" id="drop-remove" />
						<label for="drop-remove">remove after drop</label>
					</p>
				</div>
				<div class="col-xl-10" id="calendar-wrap">
					<div id="calendar"></div>
				</div>
			</div>

		
	
    
		



			<!-- Fullcalendar css-->
			<link href='../assets/plugins/fullcalendar/fullcalendar.css' rel='stylesheet' />
			<link href='../assets/plugins/fullcalendar/fullcalendar.print.min.css' rel='stylesheet' media='print' />

		
	
    




		<!-- Full-calendar js-->
		<script src='../assets/plugins/fullcalendar/fullcalendar.min.js'></script>
		<script src="../assets/js/calendar-events.js"></script>
		<script src="../assets/js/calendar.js"></script>

	
	
Type URL
Plugin Link https://fullcalendar.io/