{"id":7349,"date":"2019-07-10T10:13:50","date_gmt":"2019-07-10T10:13:50","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=7349"},"modified":"2019-07-19T11:38:01","modified_gmt":"2019-07-19T11:38:01","slug":"fullcalendar-con-jquery","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/fullcalendar-con-jquery\/","title":{"rendered":"Fullcalendar con jQuery"},"content":{"rendered":"<p>Hace mucho tiempo quer\u00eda dar a conocer un complemento estupendo para crear un calendario de forma completa (<strong>fullcalendar<\/strong>) en tu p\u00e1gina Web.<\/p>\n<p><strong>Fullcalendar<\/strong> es ideal para mostrar eventos, pero no es una soluci\u00f3n completa para la gesti\u00f3n de contenido de los eventos. En este art\u00edculo veremos su funcionalidad b\u00e1sica con algunos detalles y opciones que ofrece su API.<\/p>\n<p>En pr\u00f3ximos tutoriales, tenemos pensado crear un sistema completo de calendario con <strong>PHP<\/strong> y base de datos.<\/p>\n<p>Actualmente existen 4 versiones del complemento. En este art\u00edculo hablaremos de la versi\u00f3n 2 o 3 que tienen 2 dependencias con: <a href=\"http:\/\/jquery.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">jQuery<\/a> y <a href=\"http:\/\/momentjs.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Moment<\/a>.<\/p>\n<h3>Instalaci\u00f3n en tu p\u00e1gina<\/h3>\n<p>En la cabecera de tu p\u00e1gina, dentro de la etiqueta &lt;head&gt; puedes agregar los estilos y scripts necesarios para hacer funcionar <strong>Fullcalendar<\/strong>.<\/p>\n<div id=\"wpshdo_1\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_1\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_1\"><\/a><a id=\"wpshat_1\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_1\"  onClick=\"javascript:wpsh_toggleBlock(1)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_1\" onClick=\"javascript:wpsh_code(1)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_1\" onClick=\"javascript:wpsh_print(1)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_1\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"html4strict\" style=\"font-family:monospace;\"><span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/link.html\"><span class=\"kw2\">link<\/span><\/a> <span class=\"kw3\">rel<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">'stylesheet'<\/span> <span class=\"kw3\">type<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">'text\/css'<\/span> <span class=\"kw3\">href<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">'css\/fullcalendar.css'<\/span> <span class=\"sy0\">\/<\/span>&gt;<\/span>\n<span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/script.html\"><span class=\"kw2\">script<\/span><\/a> <span class=\"kw3\">type<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">'text\/javascript'<\/span> <span class=\"kw3\">src<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">'js\/moment.min.js'<\/span>&gt;&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/script.html\"><span class=\"kw2\">script<\/span><\/a>&gt;<\/span>\n<span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/script.html\"><span class=\"kw2\">script<\/span><\/a> <span class=\"kw3\">type<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">'text\/javascript'<\/span> <span class=\"kw3\">src<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">'js\/fullcalendar.min.js'<\/span>&gt;&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/script.html\"><span class=\"kw2\">script<\/span><\/a>&gt;<\/span>\n<span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/script.html\"><span class=\"kw2\">script<\/span><\/a> <span class=\"kw3\">type<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">'text\/javascript'<\/span> <span class=\"kw3\">src<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">'js\/locale\/es.js'<\/span>&gt;&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/script.html\"><span class=\"kw2\">script<\/span><\/a>&gt;<\/span><\/pre><\/div><\/div>\n<p>Requiere incluir la hoja de estilos <strong>CSS<\/strong>, la librer\u00eda <strong>Moment<\/strong>, <strong>jQuery<\/strong> y <strong>Fullcalendar<\/strong>. En el ejemplo tambi\u00e9n estamos agregando el archivo de idioma para mostrar el calendario en espa\u00f1ol que es lo que nos interesa. Si no agregas este \u00faltimo archivo, el calendario aparecer\u00e1 en idioma ingl\u00e9s por defecto.<\/p>\n<p>Estos archivos tambi\u00e9n pueden ser incluidos antes de la etiqueta de cierre del cuerpo de la p\u00e1gina &lt;\/body&gt;. Por temas de rendimiento, es mejor situarlo al final para no retrasar la carga de la p\u00e1gina.<\/p>\n<p>Dentro del cuerpo de la p\u00e1gina, o en el lugar que m\u00e1s desees del &lt;body&gt;, agrega el contenedor que se rellenar\u00e1 con el calendario. Por ejemplo;<\/p>\n<div id=\"wpshdo_2\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_2\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_2\"><\/a><a id=\"wpshat_2\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_2\"  onClick=\"javascript:wpsh_toggleBlock(2)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_2\" onClick=\"javascript:wpsh_code(2)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_2\" onClick=\"javascript:wpsh_print(2)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_2\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"html4strict\" style=\"font-family:monospace;\"><span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a> <span class=\"kw3\">id<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;calendar&quot;<\/span>&gt;&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span><\/pre><\/div><\/div>\n<p>Ahora solo queda agregar la llamada al plugin <strong>Fullcalendar<\/strong> para generar el calendario con las opciones que deseemos:<\/p>\n<div id=\"wpshdo_3\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_3\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_3\"><\/a><a id=\"wpshat_3\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_3\"  onClick=\"javascript:wpsh_toggleBlock(3)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_3\" onClick=\"javascript:wpsh_code(3)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_3\" onClick=\"javascript:wpsh_print(3)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_3\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"javascript\" style=\"font-family:monospace;\">$<span class=\"br0\">&#40;<\/span>document<span class=\"br0\">&#41;<\/span>.<span class=\"me1\">ready<\/span><span class=\"br0\">&#40;<\/span><span class=\"kw2\">function<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n    $<span class=\"br0\">&#40;<\/span><span class=\"st0\">'#calendar'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">fullCalendar<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#123;<\/span>\n        header<span class=\"sy0\">:<\/span> <span class=\"br0\">&#123;<\/span>\n            left<span class=\"sy0\">:<\/span> <span class=\"st0\">'prev,next'<\/span><span class=\"sy0\">,<\/span>\n            center<span class=\"sy0\">:<\/span> <span class=\"st0\">'title'<\/span><span class=\"sy0\">,<\/span>\n            right<span class=\"sy0\">:<\/span> <span class=\"st0\">'month,agendaWeek,agendaDay'<\/span>\n        <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span>\n        defaultDate<span class=\"sy0\">:<\/span> <span class=\"st0\">'2019-07-09'<\/span><span class=\"sy0\">,<\/span>\n        buttonIcons<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">,<\/span>\n        weekNumbers<span class=\"sy0\">:<\/span> <span class=\"kw2\">false<\/span><span class=\"sy0\">,<\/span>\n        editable<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">,<\/span>\n        eventLimit<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">,<\/span>\n        events<span class=\"sy0\">:<\/span> <span class=\"br0\">[<\/span>\n            <span class=\"br0\">&#123;<\/span>\n                title<span class=\"sy0\">:<\/span> <span class=\"st0\">'All Day Event'<\/span><span class=\"sy0\">,<\/span>\n                description<span class=\"sy0\">:<\/span> <span class=\"st0\">'Lorem ipsum 1...'<\/span><span class=\"sy0\">,<\/span>\n                start<span class=\"sy0\">:<\/span> <span class=\"st0\">'2019-07-01'<\/span><span class=\"sy0\">,<\/span>\n                color<span class=\"sy0\">:<\/span> <span class=\"st0\">'#3A87AD'<\/span><span class=\"sy0\">,<\/span>\n                textColor<span class=\"sy0\">:<\/span> <span class=\"st0\">'#ffffff'<\/span><span class=\"sy0\">,<\/span>\n            <span class=\"br0\">&#125;<\/span>\n        <span class=\"br0\">]<\/span><span class=\"sy0\">,<\/span>\n        dayClick<span class=\"sy0\">:<\/span> <span class=\"kw2\">function<\/span> <span class=\"br0\">&#40;<\/span>date<span class=\"sy0\">,<\/span> jsEvent<span class=\"sy0\">,<\/span> view<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n            <span class=\"kw3\">alert<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">'Has hecho click en: '<\/span><span class=\"sy0\">+<\/span> date.<span class=\"me1\">format<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n        <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span> \n        eventClick<span class=\"sy0\">:<\/span> <span class=\"kw2\">function<\/span> <span class=\"br0\">&#40;<\/span>calEvent<span class=\"sy0\">,<\/span> jsEvent<span class=\"sy0\">,<\/span> view<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n            $<span class=\"br0\">&#40;<\/span><span class=\"st0\">'#event-title'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">text<\/span><span class=\"br0\">&#40;<\/span>calEvent.<span class=\"me1\">title<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n            $<span class=\"br0\">&#40;<\/span><span class=\"st0\">'#event-description'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">html<\/span><span class=\"br0\">&#40;<\/span>calEvent.<span class=\"me1\">description<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n            $<span class=\"br0\">&#40;<\/span><span class=\"st0\">'#modal-event'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">modal<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n        <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span>  \n    <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/pre><\/div><\/div>\n<p>Obteniendo como resultado:<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/07\/calendar.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7352\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/07\/calendar.png\" alt=\"\" width=\"1137\" height=\"907\" srcset=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/07\/calendar.png 1137w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/07\/calendar-300x239.png 300w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/07\/calendar-768x613.png 768w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/07\/calendar-1024x817.png 1024w\" sizes=\"auto, (max-width: 1137px) 100vw, 1137px\" \/><\/a><\/p>\n<h3>Opciones<\/h3>\n<p>En esta llamada a <strong>Fullcalendar<\/strong> estamos utilizando las siguientes opciones:<\/p>\n<p><strong>header<\/strong><\/p>\n<p>Permite definir los botones y el t\u00edtulo de la parte superior del calendario.<\/p>\n<p>En la cabecera del calendario de ejemplo queremos mostrar en la parte izquierda de la cabecera los botones para la paginaci\u00f3n de los meses, semanas o d\u00edas. Se pueden agregar botones personalizados.\u00a0 Ver m\u00e1s detalles en la documentaci\u00f3n oficial.<\/p>\n<p>En el centro de la cabecera hemos querido mostrar el t\u00edtulo donde aparece el mes y el a\u00f1o por defecto y en la parte derecha nos ha interesado mostrar botones para mostrar otras vistas del calendario. En este caso, la vista del mes, semana y d\u00eda.<\/p>\n<p><strong>defaultDate<\/strong><\/p>\n<p>En este par\u00e1metro puedes definir la fecha marcada cuando se carga el calendario por primera vez.<\/p>\n<p>Un formato de fecha aceptado es por ejemplo: 2019-07-09.<\/p>\n<p>Cuando no se especifica, este valor se establece por defecto con la fecha actual.<\/p>\n<p><strong>buttonIcons<\/strong><\/p>\n<p>Establecido en true muestra unos iconos en los botones de la cabecera del calendario. Si su valor es false, se muestra un texto: sig y ant.<\/p>\n<p><strong>weekNumbers<\/strong><\/p>\n<p>Establecido en true muestra una peque\u00f1a columna en la parte izquierda del calendario para informar del n\u00famero de la semana.<\/p>\n<p><strong>eventLimit<\/strong><\/p>\n<p>Permite limitar la cantidad de eventos que se muestran en un d\u00eda. El resto se mostrar\u00e1 en una ventana emergente. Puedes indicar true, false o un n\u00famero entero.<\/p>\n<p><strong>events<\/strong><\/p>\n<p>Definici\u00f3n de la lista de objetos o eventos que se mostrar\u00e1n en el calendario.<\/p>\n<p><strong>dayClick<\/strong><\/p>\n<p>Este atributo se utiliza para controlar el evento o acci\u00f3n de hacer clic en un d\u00eda del calendario. En el ejemplo en funcionamiento tan solo estamos mostrando una alerta pero se pueden hacer infinidad de cosas como por ejemplo mostrar un formulario para agregar un nuevo evento al calendario.<\/p>\n<p><strong>eventClick<\/strong><\/p>\n<p>Este atributo se utiliza para controlar el evento o acci\u00f3n de hacer clic en un evento del calendario. En el ejemplo en funcionamiento abrimos una ventana modal y agregamos el t\u00edtulo y descripci\u00f3n del evento.<\/p>\n<p><a href=\"https:\/\/fullcalendar.io\/docs\" target=\"_blank\" rel=\"noopener noreferrer\">Ver documentaci\u00f3n completa<\/a><\/p>\n<h3>Conclusi\u00f3n<\/h3>\n<p><strong>Fullcalendar<\/strong> es uno de los plugins m\u00e1s populares y de tama\u00f1o completo para crear un calendario con <strong>JavaScript<\/strong>.<\/p>\n<p>Es potente y ligero. Algo m\u00e1s de 200kb pesa su archivo minimizado.<\/p>\n<p>Tiene m\u00e1s de 100 configuraciones personalizables.<\/p>\n<p>Intenta ser amigable con el desarrollador. Tiene conectores para usar con <strong>React<\/strong>, <strong>Vue<\/strong> y <strong>Angular<\/strong>. Proporciona definiciones de <strong>TypeScript<\/strong> de alta calidad. Tambi\u00e9n es capaz de funcionar con <strong>jQuery<\/strong>.<\/p>\n<p>Todo el c\u00f3digo fuente est\u00e1 abierto para ser modificado. Est\u00e1 disponible en GitHub. Sin enbargo, hay una edici\u00f3n \u00abpremium\u00bb no gratuita.<\/p>\n<p style=\"text-align: center;\"><a class=\"btn btn-secondary\" href=\"https:\/\/www.jose-aguilar.com\/scripts\/jquery\/fullcalendar\/\" target=\"_blank\" rel=\"noopener noreferrer\"><i class=\"fa fa-eye\"><\/i> Ver demo<\/a> <a class=\"btn btn-primary\" href=\"https:\/\/www.jose-aguilar.com\/scripts\/jquery\/fullcalendar\/fullcalendar.zip\"><i class=\"fa fa-download\"><\/i> Descargar<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Tutorial y c\u00f3digo de ejemplo que te va ayudar a insertar un calendario completo (fullcalendar) desarrollado con JavaScript con dependencias con jQuery y Moment js.<\/p>\n","protected":false},"author":1,"featured_media":7350,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14,5],"tags":[184,167],"class_list":["post-7349","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-jquery","tag-calendario","tag-eventos"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Fullcalendar con jQuery - Jose Aguilar Blog<\/title>\n<meta name=\"description\" content=\"Tutorial y c\u00f3digo de ejemplo que te va ayudar a insertar un calendario completo (fullcalendar) desarrollado con JavaScript con dependencias con jQuery y Moment js.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Fullcalendar con jQuery - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Tutorial y c\u00f3digo de ejemplo que te va ayudar a insertar un calendario completo (fullcalendar) desarrollado con JavaScript con dependencias con jQuery y Moment js.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/fullcalendar-con-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-10T10:13:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-07-19T11:38:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/07\/fullcalendar-jquery.png\" \/>\n\t<meta property=\"og:image:width\" content=\"250\" \/>\n\t<meta property=\"og:image:height\" content=\"250\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/fullcalendar-con-jquery\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/fullcalendar-con-jquery\/\",\"name\":\"Fullcalendar con jQuery - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/fullcalendar-con-jquery\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/fullcalendar-con-jquery\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/07\/fullcalendar-jquery.png\",\"datePublished\":\"2019-07-10T10:13:50+00:00\",\"dateModified\":\"2019-07-19T11:38:01+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"description\":\"Tutorial y c\u00f3digo de ejemplo que te va ayudar a insertar un calendario completo (fullcalendar) desarrollado con JavaScript con dependencias con jQuery y Moment js.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/fullcalendar-con-jquery\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/fullcalendar-con-jquery\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/fullcalendar-con-jquery\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/07\/fullcalendar-jquery.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/07\/fullcalendar-jquery.png\",\"width\":250,\"height\":250},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/fullcalendar-con-jquery\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Fullcalendar con jQuery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Fullcalendar con jQuery - Jose Aguilar Blog","description":"Tutorial y c\u00f3digo de ejemplo que te va ayudar a insertar un calendario completo (fullcalendar) desarrollado con JavaScript con dependencias con jQuery y Moment js.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Fullcalendar con jQuery - Jose Aguilar Blog","og_description":"Tutorial y c\u00f3digo de ejemplo que te va ayudar a insertar un calendario completo (fullcalendar) desarrollado con JavaScript con dependencias con jQuery y Moment js.","og_url":"https:\/\/www.jose-aguilar.com\/blog\/fullcalendar-con-jquery\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2019-07-10T10:13:50+00:00","article_modified_time":"2019-07-19T11:38:01+00:00","og_image":[{"width":250,"height":250,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/07\/fullcalendar-jquery.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/fullcalendar-con-jquery\/","url":"https:\/\/www.jose-aguilar.com\/blog\/fullcalendar-con-jquery\/","name":"Fullcalendar con jQuery - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/fullcalendar-con-jquery\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/fullcalendar-con-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/07\/fullcalendar-jquery.png","datePublished":"2019-07-10T10:13:50+00:00","dateModified":"2019-07-19T11:38:01+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"description":"Tutorial y c\u00f3digo de ejemplo que te va ayudar a insertar un calendario completo (fullcalendar) desarrollado con JavaScript con dependencias con jQuery y Moment js.","breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/fullcalendar-con-jquery\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/fullcalendar-con-jquery\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/fullcalendar-con-jquery\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/07\/fullcalendar-jquery.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/07\/fullcalendar-jquery.png","width":250,"height":250},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/fullcalendar-con-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Fullcalendar con jQuery"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/7349","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=7349"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/7349\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/7350"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=7349"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=7349"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=7349"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}