materialx-yoo
Version:
Free template based on Material Design
564 lines (559 loc) • 24.9 kB
HTML
<html class="no-js" lang="en">
<head>
<!-- Meta Tags -->
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="author" content="YooKits" />
<!-- Page Title -->
<title>Calender</title>
<!-- Favicon Icon -->
<link rel="icon" href="assets/img/favicon.png">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="assets/css/material-icons.css" />
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" />
<link rel='stylesheet' type="text/css" href="assets/css/fullcalendar.min.css" />
<link rel='stylesheet' type="text/css" href="assets/css/fullcalendar.print.min.css" media="print" />
<link rel="stylesheet" type="text/css" href="assets/css/materialX.css" />
</head>
<body>
<div class="yoo-height-b60 yoo-height-lg-b60"></div>
<header class="yoo-header yoo-style1 yoo-sticky-menu">
<div class="yoo-main-header">
<div class="yoo-main-header-in">
<div class="yoo-main-header-left">
<a href="index.html" class="yoo-logo-link yoo-light-logo"><img src="assets/img/logo.svg" alt="logo-light" /></a>
<!-- For Site Title -->
<!-- <span class="yoo-site-title">
<a href="index.html">Logo</a>
</span> -->
</div>
<div class="yoo-main-header-right">
<div class="yoo-nav-wrap yoo-fade-up">
<div class="yoo-nav-toggle">
<i class="material-icons-outlined">more_vert</i>
</div>
<nav class="yoo-nav yoo-desktop-nav">
<ul class="yoo-nav-list">
<li>
<a href="#"><i class="material-icons">home</i> Home</a>
</li>
<li>
<a href="#"><i class="material-icons">folder</i> Contact</a>
</li>
</ul>
</nav>
<!-- .yoo-nav -->
</div>
<!-- .yoo-nav-wrap -->
<ul class="yoo-ex-nav yoo-style1 yoo-flex yoo-mp0">
<li>
<div class="yoo-search-wrap">
<form action="#" class="yoo-search yoo-style1">
<input type="text" placeholder="Search people & places" class="yoo-search-input">
<button class="yoo-search-submit"><i class="material-icons-outlined">search</i></button>
</form>
<span class="yoo-search-toggle-mb yoo-ex-nav-btn"><i class="material-icons-outlined">search</i></span>
</div>
</li>
<li>
<div class="yoo-toggle-body yoo-language-nav">
<div class="yoo-toggle-btn yoo-ex-nav-btn" data-ripple="ripple" data-ripple-color="#fff">
<i class="material-icons">translate</i>
<span class="yoo-selected-language">English</span>
<span class="yoo-language-arrow"><i class="material-icons">keyboard_arrow_down</i></span>
</div>
<ul class="yoo-dropdown yoo-style1">
<li>
<a href="#">English</a>
</li>
<li>
<a href="#">Русский</a>
</li>
<li>
<a href="#">Español</a>
</li>
<li>
<a href="#">日本語</a>
</li>
</ul>
</div>
</li>
<li>
<div class="yoo-toggle-body yoo-message-area yoo-style1">
<span class="yoo-toggle-btn yoo-ex-nav-btn yoo-message-btn">
<i class="material-icons">email</i>
</span>
<div class="yoo-dropdown yoo-notify-dropdown">
<h2 class="yoo-nofify-title">
<span class="yoo-nofify-title-left">Messages</span>
<span class="yoo-nofify-title-right"><a href="#">Mark All as Read</a></span>
</h2>
<ul class="yoo-nofify-list yoo-style1 yoo-mp0">
<li>
<a href="#">
<div class="yoo-nofify-thumb">
<img src="assets/img/user/1.jpg" alt="">
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">
Bob Dylan
<span class="yoo-online-status yoo-live"></span>
</h3>
<div class="yoo-msg">
Thank you for purchasing! <br>
When you arrive prepared to negotiate
</div>
<span class="yoo-notify-time">10:23</span>
</div>
</a>
</li>
<li>
<a href="#" class="active">
<div class="yoo-nofify-thumb">
<img src="assets/img/user/2.jpg" alt="">
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">
David Gilmour
<span class="yoo-online-status"></span>
</h3>
<div class="yoo-msg">
Thank you for purchasing! <br>
When you arrive prepared to negotiate
</div>
<span class="yoo-notify-time">12:23</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="yoo-nofify-thumb">
<img src="assets/img/user/3.jpg" alt="">
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">
Jeff Beck
<span class="yoo-online-status yoo-live"></span>
</h3>
<div class="yoo-msg">
Thank you for purchasing! <br>
When you arrive prepared to negotiate
</div>
<span class="yoo-notify-time">Jan 05</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="yoo-nofify-thumb">
<img src="assets/img/user/4.jpg" alt="">
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">
Guthrie Govan
<span class="yoo-online-status"></span>
</h3>
<div class="yoo-msg">
Thank you for purchasing! <br>
When you arrive prepared to negotiate
</div>
<span class="yoo-notify-time">Jan 10</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="yoo-nofify-thumb">
<img src="assets/img/user/5.jpg" alt="">
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">
Eric Johnson
<span class="yoo-online-status"></span>
</h3>
<div class="yoo-msg">
Thank you for purchasing! <br>
When you arrive prepared to negotiate
</div>
<span class="yoo-notify-time">Jan 16</span>
</div>
</a>
</li>
</ul>
<a href="#" class="yoo-btn yoo-style2">SEE ALL <i class="material-icons-outlined">navigate_next</i></a>
</div>
</div>
</li>
<li>
<div class="yoo-toggle-body yoo-notice-area yoo-style1">
<span class="yoo-toggle-btn yoo-ex-nav-btn yoo-notice-btn">
<i class="material-icons">notifications</i>
<span class="yoo-ex-nav-label">3</span>
</span>
<div class="yoo-dropdown yoo-notify-dropdown">
<h2 class="yoo-nofify-title">Notification</h2>
<ul class="yoo-nofify-list yoo-style1 yoo-mp0">
<li>
<a href="#" class="yoo-nofify-list-in">
<div class="yoo-nofify-icon yoo-purple-box">
<i class="material-icons-outlined">supervisor_account</i>
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">Invite your friends to dashboard.</h3>
<span class="yoo-notify-time">5 hour ago</span>
</div>
</a>
</li>
<li>
<a href="#" class="yoo-nofify-list-in">
<div class="yoo-nofify-icon yoo-green-box">
<i class="material-icons-outlined">calendar_today</i>
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">3 Tasks pending this month.</h3>
<span class="yoo-notify-time">6 hour ago</span>
</div>
</a>
</li>
<li>
<a href="#" class="yoo-nofify-list-in">
<div class="yoo-nofify-icon yoo-blue-box">
<i class="material-icons-outlined">favorite_border</i>
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">7 People loved your activity.</h3>
<span class="yoo-notify-time">9 hour ago</span>
</div>
</a>
</li>
<li>
<a href="#" class="yoo-nofify-list-in">
<div class="yoo-nofify-icon yoo-purple-box">
<i class="material-icons-outlined">chat_bubble_outline</i>
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">John commented on activity.</h3>
<span class="yoo-notify-time">1 day ago</span>
</div>
</a>
</li>
<li>
<a href="#" class="yoo-nofify-list-in">
<div class="yoo-nofify-icon yoo-indigo-box">
<img src="assets/img/user/1.jpg" alt="msg1" />
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">Click your picture or add an account.</h3>
<span class="yoo-notify-time">2 days ago</span>
</div>
</a>
</li>
</ul>
<a href="#" class="yoo-btn yoo-style2">SEE ALL <i class="material-icons-outlined">navigate_next</i></a>
</div>
</div>
</li>
<li>
<div class="yoo-toggle-body yoo-profile-nav yoo-style1">
<div class="yoo-toggle-btn yoo-profile-nav-btn">
<div class="yoo-profile-nav-text">
<span>Welcome,</span>
<h4>Thom Yorke</h4>
</div>
<div class="yoo-profile-nav-img">
<img src="assets/img/profile-pic.png" alt="profile">
</div>
</div>
<ul class="yoo-dropdown yoo-style1">
<li>
<a href="#"><i class="material-icons">account_circle</i>My Profile</a>
</li>
<li>
<a href="#"><i class="material-icons">settings</i>Settings</a>
</li>
<li>
<a href="#"><i class="material-icons">videocam</i>Upload</a>
</li>
<li>
<a href="#"><i class="material-icons">help</i>Help</a>
</li>
<li class="yoo-dropdown-cta"><a href="#">Sign Out</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
</header><!-- .yoo-header -->
<div class="yoo-sidebarheader-toggle">
<div class="yoo-button-bar1"></div>
<div class="yoo-button-bar2"></div>
<div class="yoo-button-bar3"></div>
</div><!-- .yoo-sidebarheader-toggle -->
<div class="yoo-sidebarheader">
<div class="yoo-add">
<div class="yoo-add-in">
<a target="_blank" href="https://yookits.com/product/materialx-material-bootstrap-admin-template" class="yoo-add-thumb">
<img src="assets/img/MATERIAL-X-3.png" alt="MaterialXPro">
</a>
<h2 class="yoo-add-title"><a target="_blank" href="https://yookits.com/product/materialx-material-bootstrap-admin-template">Go Pro & unlock 100+ more UI components & pages.</a></h2>
<a target="_blank" href="https://yookits.com/product/materialx-material-bootstrap-admin-template" class="yoo-add-btn btn btn-success btn-sm">Show Me</a>
</div>
</div>
<div class="yoo-sidebarheader-in" data-scrollbar>
<div class="yoo-sidebar-nav">
<ul class="yoo-sidebar-nav-list yoo-mp0">
<li>
<a href="index.html" data-ripple="ripple" data-ripple-color="#3f51ae">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons">dashboard</i></span>
<span class="yoo-sidebar-link-text">Dashboard</span>
</span>
</a>
</li>
<li>
<a href="settings.html" data-ripple="ripple" data-ripple-color="#3f51ae">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons">settings</i></span>
<span class="yoo-sidebar-link-text">Profile Settings</span>
</span>
</a>
</li>
<li class="active">
<a href="calender.html" data-ripple="ripple" data-ripple-color="#3f51ae">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons">event_note</i></span>
<span class="yoo-sidebar-link-text">Calender</span>
</span>
</a>
</li>
<li class="yoo-sidebar-has-children">
<a href="#" data-ripple="ripple" data-ripple-color="#3f51ae">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons">account_circle</i></span>
<span class="yoo-sidebar-link-text">Sign In/Sign Up</span>
</span>
</a>
<ul class="yoo-sidebar-nav-dropdown">
<li>
<a href="login.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Log In</span>
</span>
</a>
</li>
<li>
<a href="login.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Sign Up</span>
</span>
</a>
</li>
</ul>
</li>
<li>
<a href="alerts.html" data-ripple="ripple" data-ripple-color="#3f51ae">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons">insert_drive_file</i></span>
<span class="yoo-sidebar-link-text">Notifications</span>
</span>
</a>
</li>
<li>
<a href="button.html" data-ripple="ripple" data-ripple-color="#3f51ae">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons">folder</i></span>
<span class="yoo-sidebar-link-text">Buttons</span>
</span>
</a>
</li>
<li>
<a href="tables.html" data-ripple="ripple" data-ripple-color="#3f51ae">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons">table_chart</i></span>
<span class="yoo-sidebar-link-text">Table</span>
</span>
</a>
</li>
<li>
<a href="forms.html" data-ripple="ripple" data-ripple-color="#3f51ae">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons">add_to_photos</i></span>
<span class="yoo-sidebar-link-text">Forms</span>
</span>
</a>
</li>
<li>
<a href="pagination.html" data-ripple="ripple" data-ripple-color="#3f51ae">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons">flag</i></span>
<span class="yoo-sidebar-link-text">Pagination</span>
</span>
</a>
</li>
<li>
<a href="typography.html" data-ripple="ripple" data-ripple-color="#3f51ae">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons">font_download</i></span>
<span class="yoo-sidebar-link-text">Typography</span>
</span>
</a>
</li>
<li class="yoo-sidebar-has-children">
<a href="#" data-ripple="ripple" data-ripple-color="#3f51ae">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons">cloud</i></span>
<span class="yoo-sidebar-link-text">Components</span>
</span>
</a>
<ul class="yoo-sidebar-nav-dropdown">
<li>
<a href="badge.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Badge</span>
</span>
</a>
</li>
<li>
<a href="breadcrumb.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Breadcrumb</span>
</span>
</a>
</li>
<li>
<a href="card.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Card</span>
</span>
</a>
</li>
<li>
<a href="carousel.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Carousel</span>
</span>
</a>
</li>
<li>
<a href="collapse.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Collapse</span>
</span>
</a>
</li>
<li>
<a href="dropdowns.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Dropdowns</span>
</span>
</a>
</li>
<li>
<a href="list-group.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">List Group</span>
</span>
</a>
</li>
<li>
<a href="modal.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Modal</span>
</span>
</a>
</li>
<li>
<a href="tooltips.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Tooltips</span>
</span>
</a>
</li>
</ul>
</li>
<li>
<a href="icons.html" data-ripple="ripple" data-ripple-color="#3f51ae">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons">archive</i></span>
<span class="yoo-sidebar-link-text">Icons</span>
</span>
</a>
</li>
<li>
<a href="svgmaps.html" data-ripple="ripple" data-ripple-color="#3f51ae">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons">explore</i></span>
<span class="yoo-sidebar-link-text">SVG Maps</span>
</span>
</a>
</li>
<li>
<a href="documentation.html" data-ripple="ripple" data-ripple-color="#3f51ae">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons">library_books</i></span>
<span class="yoo-sidebar-link-text">Documentation</span>
</span>
</a>
</li>
</ul><!-- .yoo-sidebar-nav-list -->
</div>
</div>
</div><!-- .yoo-sidebarheader -->
<div class="yoo-content yoo-style1">
<div class="container">
<div class="yoo-uikits-heading">
<ul class="yoo-breadcamb yoo-style1 yoo-mp0">
<li><a href="#">Home</a></li>
<li>FAQ</li>
</ul>
<h2 class="yoo-uikits-title">FAQ</h2>
</div>
</div>
<div class="yoo-height-b30 yoo-height-lg-b30"></div>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="yoo-card yoo-style1 yoo-calendar-card">
<div class="yoo-card-heading">
<div class="yoo-card-heading-left">
<h2 class="yoo-card-title">Calendar</h2>
</div>
<div class="yoo-card-heading-right">
<a href="#" data-ripple="ripple" data-ripple-color="#fff" class="btn btn-primary"><i class="ion ion-ios-add"></i>Add New Task</a>
</div>
</div>
<div class="yoo-card-body">
<div id="yoo-calendar"></div>
</div>
</div>
</div>
<!-- .col -->
</div>
</div>
<div class="yoo-height-b60 yoo-height-lg-b60"></div>
<footer class="yoo-footer yoo-style1">
<div class="container">
<div class="yoo-footer-content">
<div class="yoo-copyride">Made with coffee & love by <a href="https://yookits.com/" target="_blank">YooKits</a> ©All rights reserved.</div>
<ul class="yoo-footer-nav yoo-mp0 yoo-flex">
<li><a href="#">About</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Sitemap</a></li>
</ul>
</div>
</div>
</footer>
</div><!-- .yoo-content -->
<!-- Required Scripts -->
<script src="assets/js/jquery-1.12.4.min.js"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/smooth-scrollbar.js"></script>
<script src="assets/js/moment.min.js"></script>
<script src="assets/js/fullcalendar.min.js"></script>
<script src="assets/js/materialX.js"></script>
</body>
</html>