{"id":654,"date":"2013-10-05T19:57:26","date_gmt":"2013-10-05T18:57:26","guid":{"rendered":"http:\/\/www.kumbiaphp.com\/blog\/?p=654"},"modified":"2017-12-22T13:09:01","modified_gmt":"2017-12-22T12:09:01","slug":"ical-con-kumbiaphp-beta2","status":"publish","type":"post","link":"https:\/\/kumbiaphp.com\/blog\/2013\/10\/05\/ical-con-kumbiaphp-beta2\/","title":{"rendered":"iCal con Kumbiaphp beta2"},"content":{"rendered":"<p>Buen d\u00eda,<\/p>\n<p>Este es mi primer post para la comunidad y espero les sirva:<\/p>\n<p>Voy a explicar como implementar un <strong><span style=\"color: #000000;\">iCal \u00a0jQuery<\/span><\/strong> (Calendario de eventos con estilo similar al del iphone) y poblarlo con los datos que tengo en <strong>MySQL<\/strong> a trav\u00e9s de <strong>Kumbiaphp<\/strong> Framework:<\/p>\n<p>Lo primero que deben hacer, obviamente despu\u00e9s de tener configurado <strong>Kumbiaphp Beta2<\/strong>, es descargar el <strong>iCal<\/strong> desde\u00a0<a href=\"https:\/\/github.com\/MrHus\/jquery-monthly-ical\">aqu\u00ed<\/a>\u00a0.\u00a0 Los archivos <strong>.js<\/strong> se ubican en <strong>\/default\/app\/public\/javascript<\/strong>, el archivo .<strong>css<\/strong> se ubica en<strong>\u00a0\/default\/app\/public\/css.<\/strong><\/p>\n<p>Creamos una tabla en <strong>MySQL<\/strong> que va a ser nuestro insumo de datos para poblar el calendario (supongo hasta aqu\u00ed que ya saben que es un modelo, como se configura la base de datos y sus convenciones) :<\/p>\n<pre><code class=\"language-sql\" data-line=\"\">\nCREATE TABLE IF NOT EXISTS `agenda` (\n    `id` int(11) NOT NULL AUTO_INCREMENT,\n    `fecha` date NOT NULL,\n    `hora_inicio` time NOT NULL,\n    `hora_fin` time NOT NULL,\n    `producto_id` int(11) NOT NULL,\n    `cliente_id` int(11) NOT NULL,\n    `estado` varchar(10) NOT NULL,\n    PRIMARY KEY (`id`)\n) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT= 8;\n<\/code><\/pre>\n<p>Si se fijan, \u00a0la creaci\u00f3n de la tabla est\u00e1 asociada a dos tablas que son cliente y producto.<\/p>\n<p>En la clase modelo <strong>agenda.php <\/strong>se crea<strong>\u00a0<\/strong>una funci\u00f3n:<\/p>\n<pre><code class=\"language-php\" data-line=\"\">\npublic function getCalendario() {\n    $sql = &quot;SELECT fecha as date, producto.nombre as title,\n       CONCAT(hora_inicio, &#039; hasta &#039;, hora_fin, &#039; &#039;, cliente.nombres, &#039; &#039;, cliente.apellidos) as &#039;desc&#039;\n       FROM agenda\n       INNER JOIN cliente ON (agenda.cliente_id=cliente.id)\n       INNER JOIN producto ON (agenda.producto_id=producto.id)&quot;;\n\n    return $this-&gt;find_all_by_sql($sql);\n}\n<\/code><\/pre>\n<p>C\u00f3mo pueden ver hay un <strong>join<\/strong> a dos tablas asociadas.<\/p>\n<p>En el controlador <strong>agenda_controller.php<\/strong>\u00a0se crea una funci\u00f3n que llame la consulta creada en el modelo y lo traiga en un <strong>array:<\/strong><\/p>\n<pre><code class=\"language-php\" data-line=\"\">\npublic function verCalendario() {\n    $this-&gt;calendario = Load::model(&#039;agenda&#039;)-&gt;getCalendario();\n}\n<\/code><\/pre>\n<p>Luego en el directorio \u00a0<strong>\/default\/app\/view\/_shared\/partials\u00a0<\/strong>se crea un <strong>partial,\u00a0<\/strong>decid\u00ed hacer un partial para reutilizarlo en caso de que necesite incluirlo en otras p\u00e1ginas.<\/p>\n<pre><code class=\"language-php\" data-line=\"\">\n&lt;script type = &quot;text\/javascript&quot;&gt;\n    $(document).ready(function () {\n        $(&quot;#ical&quot;).ical({\n            daynames: [&#039;Dom&#039;, &#039;Lun&#039;, &#039;Mar&#039;, &#039;Mie&#039;, &#039;Jue&#039;, &#039;Vie&#039;, &#039;Sab&#039;],\n            \/\/startOnSunday: true,\n            eventdates: &lt;?php echo json_encode($Model); ?&gt;\n        });\n    });\n&lt;\/script&gt;\n&lt;div id=&quot;ical&quot;&gt;&lt;\/div&gt;\n<\/code><\/pre>\n<p>Como ven estoy usando la funci\u00f3n<strong> json_encode<\/strong> que me va a arrojar un formato como este:<\/p>\n<pre><code class=\"\" data-line=\"\">\neventdates: [{&quot;date&quot;: &quot;2009-03-21&quot;, &quot;title&quot;: &quot;My birthday&quot;, &quot;desc&quot;: &quot;Its my birthday!&quot;},\n{&quot;date&quot;: &quot;yyyy-01-01&quot;, &quot;title&quot;: &quot;New Year&quot;, &quot;desc&quot;: &quot;Its a new year!&quot;}]<\/code><\/pre>\n<p>Los alias que utilic\u00e9 en la consulta del modelo (<strong>date,title,desc<\/strong>) est\u00e1n asociados a este formato.<\/p>\n<p>Y por \u00faltimo se implementa la vista <strong>verCalendario.phtml<\/strong>\u00a0con el siguiente c\u00f3digo:<\/p>\n<pre><code class=\"language-php\" data-line=\"\">\n&lt;?php\necho Tag::js(&#039;jquery-1.3.2.min&#039;);\necho Tag::js(&#039;jquery-ical&#039;);\nTag::css(&#039;master&#039;);\n?&gt;\n&lt;?php echo View::content(); ?&gt;\n&lt;?php echo View::partial(&#039;ical\/script&#039;, false, array(&#039;Model&#039; =&gt; $calendario)); ?&gt;<\/code><\/pre>\n<p>Y esto es todo, espero sea de utilidad y si tienen aportes, mejoras o recomendaciones <strong>\u00a1bien recibidas sean!<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Buen d\u00eda, Este es mi primer post para la comunidad y espero les sirva: Voy a explicar como implementar&hellip;<\/p>\n","protected":false},"author":10,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1,9],"tags":[36,79],"class_list":["post-654","post","type-post","status-publish","format-standard","hentry","category-php","category-tutoriales-y-screencast","tag-ejemplos","tag-ical"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>iCal con Kumbiaphp beta2 - KumbiaPHP Framework PHP en espa\u00f1ol<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kumbiaphp.com\/blog\/2013\/10\/05\/ical-con-kumbiaphp-beta2\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"iCal con Kumbiaphp beta2 - KumbiaPHP Framework PHP en espa\u00f1ol\" \/>\n<meta property=\"og:description\" content=\"Buen d\u00eda, Este es mi primer post para la comunidad y espero les sirva: Voy a explicar como implementar&hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kumbiaphp.com\/blog\/2013\/10\/05\/ical-con-kumbiaphp-beta2\/\" \/>\n<meta property=\"og:site_name\" content=\"KumbiaPHP Framework PHP en espa\u00f1ol\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kumbia.fw\" \/>\n<meta property=\"article:published_time\" content=\"2013-10-05T18:57:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-12-22T12:09:01+00:00\" \/>\n<meta name=\"author\" content=\"danieldomaza\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@kumbiaphp\" \/>\n<meta name=\"twitter:site\" content=\"@kumbiaphp\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"danieldomaza\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kumbiaphp.com\/blog\/2013\/10\/05\/ical-con-kumbiaphp-beta2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kumbiaphp.com\/blog\/2013\/10\/05\/ical-con-kumbiaphp-beta2\/\"},\"author\":{\"name\":\"danieldomaza\",\"@id\":\"https:\/\/kumbiaphp.com\/blog\/#\/schema\/person\/6fa78158e59bc16e01ef38a8657fead6\"},\"headline\":\"iCal con Kumbiaphp beta2\",\"datePublished\":\"2013-10-05T18:57:26+00:00\",\"dateModified\":\"2017-12-22T12:09:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kumbiaphp.com\/blog\/2013\/10\/05\/ical-con-kumbiaphp-beta2\/\"},\"wordCount\":290,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/kumbiaphp.com\/blog\/#organization\"},\"keywords\":[\"ejemplos\",\"ical\"],\"articleSection\":[\"PHP\",\"Tutoriales y screencast\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kumbiaphp.com\/blog\/2013\/10\/05\/ical-con-kumbiaphp-beta2\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kumbiaphp.com\/blog\/2013\/10\/05\/ical-con-kumbiaphp-beta2\/\",\"url\":\"https:\/\/kumbiaphp.com\/blog\/2013\/10\/05\/ical-con-kumbiaphp-beta2\/\",\"name\":\"iCal con Kumbiaphp beta2 - KumbiaPHP Framework PHP en espa\u00f1ol\",\"isPartOf\":{\"@id\":\"https:\/\/kumbiaphp.com\/blog\/#website\"},\"datePublished\":\"2013-10-05T18:57:26+00:00\",\"dateModified\":\"2017-12-22T12:09:01+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/kumbiaphp.com\/blog\/2013\/10\/05\/ical-con-kumbiaphp-beta2\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kumbiaphp.com\/blog\/2013\/10\/05\/ical-con-kumbiaphp-beta2\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kumbiaphp.com\/blog\/2013\/10\/05\/ical-con-kumbiaphp-beta2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/kumbiaphp.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"iCal con Kumbiaphp beta2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kumbiaphp.com\/blog\/#website\",\"url\":\"https:\/\/kumbiaphp.com\/blog\/\",\"name\":\"KumbiaPHP Framework PHP en espa\u00f1ol\",\"description\":\"Web &amp; app MVC PHP framework\",\"publisher\":{\"@id\":\"https:\/\/kumbiaphp.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kumbiaphp.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kumbiaphp.com\/blog\/#organization\",\"name\":\"KumbiaPHP Framework PHP en espa\u00f1ol\",\"url\":\"https:\/\/kumbiaphp.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kumbiaphp.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kumbiaphp.com\/blog\/wp-content\/uploads\/2015\/02\/logo.png\",\"contentUrl\":\"https:\/\/kumbiaphp.com\/blog\/wp-content\/uploads\/2015\/02\/logo.png\",\"width\":432,\"height\":50,\"caption\":\"KumbiaPHP Framework PHP en espa\u00f1ol\"},\"image\":{\"@id\":\"https:\/\/kumbiaphp.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kumbia.fw\",\"https:\/\/x.com\/kumbiaphp\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kumbiaphp.com\/blog\/#\/schema\/person\/6fa78158e59bc16e01ef38a8657fead6\",\"name\":\"danieldomaza\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/f68625fc23d44d13180e6d0f3c97bde90172f5ca0e9ec3104d1b7d722de31283?s=96&d=mm&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f68625fc23d44d13180e6d0f3c97bde90172f5ca0e9ec3104d1b7d722de31283?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f68625fc23d44d13180e6d0f3c97bde90172f5ca0e9ec3104d1b7d722de31283?s=96&d=mm&r=g\",\"caption\":\"danieldomaza\"},\"description\":\"Orgullosamente colombiano.\",\"url\":\"https:\/\/kumbiaphp.com\/blog\/author\/danieldomaza\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"iCal con Kumbiaphp beta2 - KumbiaPHP Framework PHP en espa\u00f1ol","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kumbiaphp.com\/blog\/2013\/10\/05\/ical-con-kumbiaphp-beta2\/","og_locale":"es_ES","og_type":"article","og_title":"iCal con Kumbiaphp beta2 - KumbiaPHP Framework PHP en espa\u00f1ol","og_description":"Buen d\u00eda, Este es mi primer post para la comunidad y espero les sirva: Voy a explicar como implementar&hellip;","og_url":"https:\/\/kumbiaphp.com\/blog\/2013\/10\/05\/ical-con-kumbiaphp-beta2\/","og_site_name":"KumbiaPHP Framework PHP en espa\u00f1ol","article_publisher":"https:\/\/www.facebook.com\/kumbia.fw","article_published_time":"2013-10-05T18:57:26+00:00","article_modified_time":"2017-12-22T12:09:01+00:00","author":"danieldomaza","twitter_card":"summary_large_image","twitter_creator":"@kumbiaphp","twitter_site":"@kumbiaphp","twitter_misc":{"Escrito por":"danieldomaza","Tiempo de lectura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kumbiaphp.com\/blog\/2013\/10\/05\/ical-con-kumbiaphp-beta2\/#article","isPartOf":{"@id":"https:\/\/kumbiaphp.com\/blog\/2013\/10\/05\/ical-con-kumbiaphp-beta2\/"},"author":{"name":"danieldomaza","@id":"https:\/\/kumbiaphp.com\/blog\/#\/schema\/person\/6fa78158e59bc16e01ef38a8657fead6"},"headline":"iCal con Kumbiaphp beta2","datePublished":"2013-10-05T18:57:26+00:00","dateModified":"2017-12-22T12:09:01+00:00","mainEntityOfPage":{"@id":"https:\/\/kumbiaphp.com\/blog\/2013\/10\/05\/ical-con-kumbiaphp-beta2\/"},"wordCount":290,"commentCount":2,"publisher":{"@id":"https:\/\/kumbiaphp.com\/blog\/#organization"},"keywords":["ejemplos","ical"],"articleSection":["PHP","Tutoriales y screencast"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kumbiaphp.com\/blog\/2013\/10\/05\/ical-con-kumbiaphp-beta2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kumbiaphp.com\/blog\/2013\/10\/05\/ical-con-kumbiaphp-beta2\/","url":"https:\/\/kumbiaphp.com\/blog\/2013\/10\/05\/ical-con-kumbiaphp-beta2\/","name":"iCal con Kumbiaphp beta2 - KumbiaPHP Framework PHP en espa\u00f1ol","isPartOf":{"@id":"https:\/\/kumbiaphp.com\/blog\/#website"},"datePublished":"2013-10-05T18:57:26+00:00","dateModified":"2017-12-22T12:09:01+00:00","breadcrumb":{"@id":"https:\/\/kumbiaphp.com\/blog\/2013\/10\/05\/ical-con-kumbiaphp-beta2\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kumbiaphp.com\/blog\/2013\/10\/05\/ical-con-kumbiaphp-beta2\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kumbiaphp.com\/blog\/2013\/10\/05\/ical-con-kumbiaphp-beta2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/kumbiaphp.com\/blog\/"},{"@type":"ListItem","position":2,"name":"iCal con Kumbiaphp beta2"}]},{"@type":"WebSite","@id":"https:\/\/kumbiaphp.com\/blog\/#website","url":"https:\/\/kumbiaphp.com\/blog\/","name":"KumbiaPHP Framework PHP en espa\u00f1ol","description":"Web &amp; app MVC PHP framework","publisher":{"@id":"https:\/\/kumbiaphp.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kumbiaphp.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kumbiaphp.com\/blog\/#organization","name":"KumbiaPHP Framework PHP en espa\u00f1ol","url":"https:\/\/kumbiaphp.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kumbiaphp.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/kumbiaphp.com\/blog\/wp-content\/uploads\/2015\/02\/logo.png","contentUrl":"https:\/\/kumbiaphp.com\/blog\/wp-content\/uploads\/2015\/02\/logo.png","width":432,"height":50,"caption":"KumbiaPHP Framework PHP en espa\u00f1ol"},"image":{"@id":"https:\/\/kumbiaphp.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kumbia.fw","https:\/\/x.com\/kumbiaphp"]},{"@type":"Person","@id":"https:\/\/kumbiaphp.com\/blog\/#\/schema\/person\/6fa78158e59bc16e01ef38a8657fead6","name":"danieldomaza","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/f68625fc23d44d13180e6d0f3c97bde90172f5ca0e9ec3104d1b7d722de31283?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/f68625fc23d44d13180e6d0f3c97bde90172f5ca0e9ec3104d1b7d722de31283?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f68625fc23d44d13180e6d0f3c97bde90172f5ca0e9ec3104d1b7d722de31283?s=96&d=mm&r=g","caption":"danieldomaza"},"description":"Orgullosamente colombiano.","url":"https:\/\/kumbiaphp.com\/blog\/author\/danieldomaza\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/kumbiaphp.com\/blog\/wp-json\/wp\/v2\/posts\/654","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kumbiaphp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kumbiaphp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kumbiaphp.com\/blog\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/kumbiaphp.com\/blog\/wp-json\/wp\/v2\/comments?post=654"}],"version-history":[{"count":24,"href":"https:\/\/kumbiaphp.com\/blog\/wp-json\/wp\/v2\/posts\/654\/revisions"}],"predecessor-version":[{"id":1732,"href":"https:\/\/kumbiaphp.com\/blog\/wp-json\/wp\/v2\/posts\/654\/revisions\/1732"}],"wp:attachment":[{"href":"https:\/\/kumbiaphp.com\/blog\/wp-json\/wp\/v2\/media?parent=654"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kumbiaphp.com\/blog\/wp-json\/wp\/v2\/categories?post=654"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kumbiaphp.com\/blog\/wp-json\/wp\/v2\/tags?post=654"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}