263 lines
9.9 KiB
HTML
263 lines
9.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Fullcalendar jQuery Demo</title>
|
|
<meta name="description" content="Fullcalendar ejemplo..."/>
|
|
<meta name="author" content="Jose Aguilar">
|
|
<link rel="shortcut icon" href="https://www.jose-aguilar.com/blog/wp-content/themes/jaconsulting/favicon.ico" />
|
|
<link rel="stylesheet" href="css/font-awesome.min.css">
|
|
<!-- Latest compiled and minified CSS -->
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="css/styles.css">
|
|
<link rel='stylesheet' type='text/css' href='css/fullcalendar.css' />
|
|
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
|
|
<script type='text/javascript' src='js/moment.min.js'></script>
|
|
<script type='text/javascript' src='js/fullcalendar.min.js'></script>
|
|
<script type='text/javascript' src='js/locale/es.js'></script>
|
|
<script>
|
|
function addZero(i) {
|
|
if (i < 10) {
|
|
i = '0' + i;
|
|
}
|
|
return i;
|
|
}
|
|
|
|
var hoy = new Date();
|
|
var dd = hoy.getDate();
|
|
if(dd<10) {
|
|
dd='0'+dd;
|
|
}
|
|
|
|
if(mm<10) {
|
|
mm='0'+mm;
|
|
}
|
|
|
|
var mm = hoy.getMonth()+1;
|
|
var yyyy = hoy.getFullYear();
|
|
|
|
dd=addZero(dd);
|
|
mm=addZero(mm);
|
|
|
|
$(document).ready(function() {
|
|
$('#calendar').fullCalendar({
|
|
header: {
|
|
left: 'prev,next',
|
|
center: 'title',
|
|
right: 'month,agendaWeek,agendaDay'
|
|
},
|
|
defaultDate: yyyy+'-'+mm+'-'+dd,
|
|
buttonIcons: true, // show the prev/next text
|
|
weekNumbers: false,
|
|
editable: true,
|
|
eventLimit: true, // allow "more" link when too many events
|
|
events: [
|
|
{
|
|
title: 'All Day Event',
|
|
description: 'Lorem ipsum 1...',
|
|
start: yyyy+'-'+mm+'-01',
|
|
color: '#3A87AD',
|
|
textColor: '#ffffff',
|
|
},
|
|
{
|
|
title: 'Long Event',
|
|
description: 'Lorem ipsum 2...',
|
|
start: yyyy+'-'+mm+'-07',
|
|
end: yyyy+'-'+mm+'-10',
|
|
color: '#3A87AD',
|
|
textColor: '#ffffff',
|
|
},
|
|
{
|
|
title: 'Repeating Event',
|
|
description: 'Lorem ipsum 3...',
|
|
start: yyyy+'-'+mm+'-09T16:00:00',
|
|
color: '#3A87AD',
|
|
textColor: '#ffffff',
|
|
},
|
|
{
|
|
title: 'Repeating Event',
|
|
description: 'Lorem ipsum 4...',
|
|
start: yyyy+'-'+mm+'-16T16:00:00',
|
|
color: '#3A87AD',
|
|
textColor: '#ffffff',
|
|
},
|
|
{
|
|
title: 'Conference',
|
|
description: 'Lorem ipsum 5...',
|
|
start: yyyy+'-'+mm+'-11',
|
|
end: yyyy+'-'+mm+'-13',
|
|
color: '#3A87AD',
|
|
textColor: '#ffffff',
|
|
},
|
|
{
|
|
title: 'Meeting',
|
|
description: 'Lorem ipsum 6...',
|
|
start: yyyy+'-'+mm+'-12T10:30:00',
|
|
end: yyyy+'-'+mm+'-12T12:30:00',
|
|
color: '#3A87AD',
|
|
textColor: '#ffffff',
|
|
},
|
|
{
|
|
title: 'Lunch',
|
|
description: 'Lorem ipsum 7...',
|
|
start: yyyy+'-'+mm+'-12T12:00:00',
|
|
color: '#3A87AD',
|
|
textColor: '#ffffff',
|
|
},
|
|
{
|
|
title: 'Meeting',
|
|
description: 'Lorem ipsum 8...',
|
|
start: yyyy+'-'+mm+'-12T14:30:00',
|
|
color: '#3A87AD',
|
|
textColor: '#ffffff',
|
|
},
|
|
{
|
|
title: 'Happy Hour',
|
|
description: 'Lorem ipsum 9...',
|
|
start: yyyy+'-'+mm+'-12T17:30:00',
|
|
color: '#3A87AD',
|
|
textColor: '#ffffff',
|
|
},
|
|
{
|
|
title: 'Dinner',
|
|
description: 'Lorem ipsum 10...',
|
|
start: yyyy+'-'+mm+'-12T20:00:00',
|
|
color: '#3A87AD',
|
|
textColor: '#ffffff',
|
|
},
|
|
{
|
|
title: 'Birthday Party',
|
|
description: 'Lorem ipsum 11...',
|
|
start: yyyy+'-'+mm+'-13T07:00:00',
|
|
color: '#3A87AD',
|
|
textColor: '#ffffff',
|
|
},
|
|
{
|
|
title: 'Event with link',
|
|
description: 'Lorem ipsum 12...',
|
|
url: 'http://www.jose-aguilar.com/',
|
|
start: yyyy+'-'+mm+'-28',
|
|
color: '#3A87AD',
|
|
textColor: '#ffffff',
|
|
}
|
|
],
|
|
dayClick: function (date, jsEvent, view) {
|
|
alert('Has hecho click en: '+ date.format());
|
|
},
|
|
eventClick: function (calEvent, jsEvent, view) {
|
|
$('#event-title').text(calEvent.title);
|
|
$('#event-description').html(calEvent.description);
|
|
$('#modal-event').modal();
|
|
},
|
|
});
|
|
});
|
|
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
|
|
<a class="navbar-brand" href="https://www.jose-aguilar.com/">
|
|
<img src="https://www.jose-aguilar.com/blog/wp-content/themes/jaconsulting/images/jose-aguilar.png" width="30" height="30" alt="Jose Aguilar">
|
|
</a>
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
|
|
<div class="navbar-nav">
|
|
<a class="nav-item nav-link active" href="https://www.jose-aguilar.com/scripts/jquery/fullcalendar/">Demo <span class="sr-only">(current)</span></a>
|
|
<a class="nav-item nav-link" href="https://www.jose-aguilar.com/scripts/jquery/fullcalendar/fullcalendar.zip">Descargar</a>
|
|
<a class="nav-item nav-link" href="https://www.jose-aguilar.com/blog/fullcalendar-con-jquery/">Tutorial</a>
|
|
<a class="nav-item nav-link" href="https://www.jose-aguilar.com/">© Jose Aguilar</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<div class="container">
|
|
<h1>Fullcalendar Demo</h1>
|
|
<h2 class="lead">Simple demo</h2>
|
|
|
|
<nav aria-label="breadcrumb">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="https://www.jose-aguilar.com/blog/">Blog</a></li>
|
|
<li class="breadcrumb-item"><a href="https://www.jose-aguilar.com/blog/fullcalendar-con-jquery/">Tutorial</a></li>
|
|
<li class="breadcrumb-item active">Fullcalendar Demo</li>
|
|
</ol>
|
|
</nav>
|
|
|
|
<div class="row">
|
|
<div id="content" class="col-lg-12">
|
|
<div id="calendar"></div>
|
|
<div class="modal fade" id="modal-event" tabindex="-1" role="dialog" aria-labelledby="modal-eventLabel" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="event-title"></h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div id="event-description"></div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
|
<button type="button" class="btn btn-primary">Save changes</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
|
|
<!-- Bloque de anuncios adaptable -->
|
|
<ins class="adsbygoogle"
|
|
style="display:block"
|
|
data-ad-client="ca-pub-6676636635558550"
|
|
data-ad-slot="8523024962"
|
|
data-ad-format="auto"
|
|
data-full-width-responsive="true"></ins>
|
|
<script>
|
|
(adsbygoogle = window.adsbygoogle || []).push({});
|
|
</script>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h5 class="card-header">Comparte en las redes sociales</h5>
|
|
<div class="card-body">
|
|
<h5 class="card-title">¿Te ha servido este ejemplo? Comparte con tus amigos</h5>
|
|
<!-- Go to www.addthis.com/dashboard to customize your tools -->
|
|
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4ecc1a47193e29e4" async="async"></script>
|
|
<!-- Go to www.addthis.com/dashboard to customize your tools -->
|
|
<div class="addthis_sharing_toolbox"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-content row">
|
|
<div class="col-lg-12">
|
|
<div class="pull-right">
|
|
<a href=" https://www.jose-aguilar.com/blog/fullcalendar-con-jquery/" class="btn btn-secondary">
|
|
<i class="fa fa-reply"></i> volver al tutorial
|
|
</a>
|
|
<a href="https://www.jose-aguilar.com/scripts/jquery/fullcalendar/fullcalendar.zip" class="btn btn-primary">
|
|
<i class="fa fa-download"></i> Descargar
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<footer class="footer bg-dark">
|
|
<div class="container">
|
|
<span class="text-muted"><a href="https://www.jose-aguilar.com/">© Jose Aguilar</a></span>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
</html>
|