|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<title>Agenda Trimestral</title> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.css"> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.js"></script> |
|
<link rel="icon" type="image/png" href="https://i.ibb.co/YLLzsJ8/tcvl-121x107.webp"> |
|
<style> |
|
body { |
|
padding: 20px; |
|
} |
|
#calendar { |
|
max-width: 800px; |
|
margin: 0 auto; |
|
} |
|
.fc-content { |
|
color: #000; |
|
} |
|
.fc-day-top { |
|
text-align: center; |
|
font-weight: bold; |
|
} |
|
.fc-button { |
|
margin-right: 5px; |
|
} |
|
.ui.menu .item img.logo { |
|
margin-right: 1.5em; |
|
} |
|
.main.container { |
|
margin-top: 7em; |
|
} |
|
.wireframe { |
|
margin-top: 2em; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div class="ui fixed inverted menu"> |
|
<div class="ui container"> |
|
<a href="#" class="header item"> |
|
<img class="logo" src="https://i.ibb.co/YLLzsJ8/tcvl-121x107.webp"> |
|
Agenda Trimestral |
|
</a> |
|
</div> |
|
</div> |
|
|
|
<div class="ui main container"> |
|
<div class="ui grid"> |
|
<div class="row"> |
|
<div class="sixteen wide column"> |
|
<div id="calendar"></div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="ui inverted vertical footer segment"> |
|
<div class="ui center aligned container"> |
|
<div class="ui stackable inverted divided grid"> |
|
<div class="eight wide column"> |
|
<h4 class="ui inverted header">Agenda Trimestral</h4> |
|
<p>Todos los derechos reservados © 2023</p> |
|
</div> |
|
<div class="eight wide right aligned column"> |
|
<h4 class="ui inverted header">Síguenos en</h4> |
|
<div class="ui inverted link list"> |
|
<a href="#" class="item">Facebook</a> |
|
<a href="#" class="item">Twitter</a> |
|
<a href="#" class="item">Instagram</a> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<script> |
|
$(document).ready(function() { |
|
$('#calendar').fullCalendar({ |
|
header: { |
|
left: 'prev,next today', |
|
center: 'title', |
|
right: 'month,basicWeek,basicDay' |
|
}, |
|
defaultDate: moment().format('YYYY-MM-DD'), |
|
navLinks: true, |
|
editable: true, |
|
eventLimit: true, |
|
events: [ |
|
{ |
|
title: 'All Day Event', |
|
start: '2023-01-01' |
|
}, |
|
{ |
|
title: 'Long Event', |
|
start: '2023-01-07', |
|
end: '2023-01-10' |
|
}, |
|
{ |
|
id: 999, |
|
title: 'Repeating Event', |
|
start: '2023-01-09T16:00:00' |
|
}, |
|
{ |
|
id: 999, |
|
title: 'Repeating Event', |
|
start: '2023-01-16T16:00:00' |
|
}, |
|
{ |
|
title: 'Conference', |
|
start: '2023-01-11', |
|
end: '2023-01-13' |
|
}, |
|
{ |
|
title: 'Meeting', |
|
start: '2023-01-12T10:30:00', |
|
end: '2023-01-12T12:30:00' |
|
}, |
|
{ |
|
title: 'Lunch', |
|
start: '2023-01-12T12:00:00' |
|
}, |
|
{ |
|
title: 'Meeting', |
|
start: '2023-01-12T14:30:00' |
|
}, |
|
{ |
|
title: 'Happy Hour', |
|
start: '2023-01-12T17:30:00' |
|
}, |
|
{ |
|
title: 'Dinner', |
|
start: '2023-01-12T20:00:00' |
|
}, |
|
{ |
|
title: 'Birthday Party', |
|
start: '2023-01-13T07:00:00' |
|
}, |
|
{ |
|
title: 'Click for Google', |
|
url: 'https://google.com/', |
|
start: '2023-01-28' |
|
} |
|
] |
|
}); |
|
}); |
|
</script> |
|
</body> |
|
</html> |
