A primeira coisa que salta \u00e0 vista para os n\u00e3o iniciados \u00e9 a concatena\u00e7\u00e3o das chamadas de fun\u00e7\u00e3o por meio de um ‘.’.\u00a0 Isso \u00e9 poss\u00edvel porque cada uma dessas fun\u00e7\u00f5es devolve o pr\u00f3prio objeto o que simplifica a cria\u00e7\u00e3o, configura\u00e7\u00e3o e chamada de forma mais ou menos at\u00f4mica.<\/p>\n

Fizemos quest\u00e3o de colocar uma chamada em cada linha para pode explicar passo a passo o que faz cada uma delas:<\/p>\n

var myCalendar = yCalendar()<\/em> cria uma vari\u00e1vel chamada myCalendar chamando o objeto yCalendar() <\/em>que no caso (como quase tudo no Javascript) \u00e9 uma fun\u00e7\u00e3o de alto n\u00edvel que cont\u00eam objetos privados e fun\u00e7\u00f5es que podem ser chamadas desde fora do mesmo.<\/p>\n

setDivContainerName(‘meuTeste’)<\/em> indica ao objeto que o div<\/em> que ser\u00e1 usado para conter o calend\u00e1rio chama-se ‘meuTeste<\/em>‘<\/p>\n

setCellSize(64,48)<\/em> determina que as c\u00e9lulas criadas v\u00e3o ter 64px de largura por 48px de altura.\u00a0 Pode ser indicado s\u00f3 um dos par\u00e2metros passando null para o outro.\u00a0\u00a0 Caso seja omitido, o valor de altura e largura da c\u00e9lula ser\u00e1 pegado do estilo.<\/p>\n

setOrientation(0)<\/em> faz com que o calend\u00e1rio seja montado na posi\u00e7\u00e3o deitada.<\/p>\n

E finalmente – mas n\u00e3o menos importante – chamamos build()<\/em> para construir o nosso calend\u00e1rio.\u00a0 \u00c9 importante destacar que build()<\/em> tem que ser chamado no final por se tratar de uma fun\u00e7\u00e3o destrutiva e depender dos par\u00e2metros passados anteriormente.<\/p>\n

Uma outra forma de fazer a mesma coisa e que pode resultar mais claro para alguns \u00e9 a seguinte:<\/p>\n

<script>\r\n  var mycfg = {\r\n      orientation: 0,\r\n      cellSize: { width: '64px', height: '48px' },\r\n      divContainerName: 'meuTeste'\r\n    };\r\n  var myCalendar = yCalendar(mycfg).\r\n                   build();\r\n<\/script><\/pre>\n
Neste caso, declaramos um objeto chamado mycfg<\/em> contendo todas as propriedades a serem modificadas na hora da cria\u00e7\u00e3o e a passamos como par\u00e2metro para a fun\u00e7\u00e3o criadora.\u00a0 Ai j\u00e1 \u00e9 uma quest\u00e3o de gosto e de momento.\u00a0 Por exemplo, o programador pode escolher salvar a forma de visualiza\u00e7\u00e3o do calend\u00e1rio em um banco de dados local para mais tarde mostrar aquele calend\u00e1rio do mesmo jeito em que o usu\u00e1rio o tinha deixado da \u00faltima vez.<\/p>\n
Mostrando informa\u00e7\u00e3o no calend\u00e1rio<\/h2>\n
Agora vamos a modificar o script novamente para poder colocar informa\u00e7\u00e3o nas c\u00e9lulas.\u00a0 N\u00e3o \u00e9 a \u00fanica forma mas \u00e9 uma que nos permitir\u00e1 entender as chamadas \u00e0s fun\u00e7\u00f5es callback<\/em> t\u00e3o importantes na programa\u00e7\u00e3o Javascript.<\/p>\n
<script>\r\n  var aniversarios = {\r\n      10: ['Joaquim', 'Ana'],\r\n      20: ['Pedro'],\r\n       5: ['Felisberto', 'Maria', 'Henrique', \r\n           'Marieta', 'Luiz']\r\n    };\r\n\r\n  var myCallback = function(aCaller, aEventName, aObject) {\r\n\r\n    if (aEventName=='getCellContent') {\r\n      if (aObject.date) {\r\n        var nomesAniv = aniversarios[aObject.date.getDate()];\r\n        if (nomesAniv) {\r\n          var ret='';\r\n          for(var n=0; n<nomesAniv.length; n++) {\r\n            if (n>0)\r\n              ret += \"<br>\";\r\n            ret += nomesAniv[n];\r\n          }\r\n          return ret;\r\n        }\r\n      }\r\n    }\r\n  };\r\n\r\n  var myCalendar = yCalendar().\r\n                   setDivContainerName('meuTeste').\r\n                   setCellSize(64,48).\r\n                   setOrientation(0).\r\n                   setCallback(myCallback).\r\n                   build();\r\n<\/script><\/pre>\n
Neste exemplo, existe uma vari\u00e1vel global (p\u00e9ssimo exemplo) contendo os anivers\u00e1rios do m\u00eas (em qualquer m\u00eas que voc\u00ea veja este exemplo, estes v\u00e3o estar aparecendo.\u00a0 S\u00e3o pessoas especiais que comemoram ano todo m\u00eas)<\/p>\n
Temos tamb\u00e9m uma fun\u00e7\u00e3o chamada myCallBack()<\/em> que \u00e9 chamada toda vez que uma c\u00e9lula \u00e9 criada no yCalendar() <\/em>porque indicamos isso na cria\u00e7\u00e3o nas \u00faltimas linhas com setCallback(myCallback)<\/em>.\u00a0 Claro que poder\u00edamos ter feito isto com uma fun\u00e7\u00e3o an\u00f4nima mas perder\u00edamos legibilidade.<\/p>\n
Esta fun\u00e7\u00e3o recebe tr\u00eas par\u00e2metros: aCaller<\/em>, aEventName<\/em> e aObject<\/em>.\u00a0 O prefixo ‘a’ nos par\u00e2metros \u00e9 padr\u00e3o interno nosso e serve para distinguir na hora de ler o c\u00f3digo um par\u00e2metro de uma vari\u00e1vel local, por exemplo.<\/p>\n
Bom, aCaller<\/em> \u00e9 o objeto que est\u00e1 chamando sua fun\u00e7\u00e3o de retorno.\u00a0 No caso, myCalendar<\/em>. Isso quer dizer que voc\u00ea pode usar uma fun\u00e7\u00e3o de retorno para v\u00e1rios calend\u00e1rios e que pode reagir de forma distinta analisando este par\u00e2metro.\u00a0 Por exemplo, pode ser que voc\u00ea queira ter uma miniatura do calend\u00e1rio em que os dias ocupados s\u00e3o representados s\u00f3 por um tingimento da c\u00e9lula enquanto que no outro calend\u00e1rio voc\u00ea tem mais informa\u00e7\u00e3o.<\/p>\n
O par\u00e2metro aEventName<\/em> informa qual o evento que est\u00e1 sendo disparado dentre os seguintes: DOMLocked, getEmptyDayContent, getCellContent, getTagContent e DOMReleased.<\/p>\n
E finalmente aObject<\/em> \u00e9 o objeto que est\u00e1 sendo criado, dimensionado, mostrado, destruido, liberado…<\/p>\n
Bem, ao perguntarmos if (aEventName==’getCellContent’) { … } estamos confirmando que seja o evento desejado, ou seja, quando o yCalendar()<\/em> est\u00e1 solicitando ao hospedeiro o conte\u00fado da c\u00e9lula.\u00a0 Depois analisamos se a c\u00e9lula em quest\u00e3o possui a propriedade date<\/em> com if (aObject.date) { … }<\/em> pois somente as c\u00e9lulas que sejam dias trazem esta propriedade.<\/p>\n
Se tudo isso se confirmar, ent\u00e3o \u00e9 a hora de ver se h\u00e1 anivers\u00e1rios para aquele dia (lembre que por simplifica\u00e7\u00e3o do exemplo, a data do anivers\u00e1rio tem s\u00f3 o dia e n\u00e3o o m\u00eas).\u00a0 Ent\u00e3o criamos uma vari\u00e1vel local com os anivers\u00e1rios assim: var nomesAniv = aniversarios[aObject.date.getDate()];<\/em><\/p>\n
As seguintes linhas montam o resultado, lembrando que se quisermos usar o return<\/em><\/strong> como no exemplo, ent\u00e3o devemos produzir o HTML que vai ser acrescentado \u00e0 c\u00e9lula.\u00a0 Neste caso, uma linha seguida de outra.<\/p>\n
Eventos disparados pelo yCalendar()<\/em><\/h2>\n
Voc\u00ea j\u00e1 tem a lista dos eventos que s\u00e3o disparados pelo yCalendar()<\/em>. A tabela seguinte resume sua aplica\u00e7\u00e3o<\/p>\n\n\n\n\n\n\n\n\n\n
Evento<\/strong><\/td>\n
Explana\u00e7\u00e3o<\/strong><\/td>\n
Retorno esperado<\/strong><\/td>\n<\/tr>\n<\/thead>\n
DOMLocked<\/td>\n
O yCalendar()<\/em> est\u00e1 preparando o DOM.\u00a0 Os elementos n\u00e3o existem ainda e os que porventura j\u00e1 existiam antes dentro do contenedor, ainda existem<\/td>\n
null<\/td>\n<\/tr>\n
getEmptyDayContent<\/td>\n
Solicita o conte\u00fado para uma c\u00e9lula vazia.<\/td>\n
html ou null<\/td>\n<\/tr>\n
getCellContent<\/td>\n
Solicita o conte\u00fado para uma c\u00e9lula cheia (dia v\u00e1lido)<\/td>\n
html\u00a0ou null<\/td>\n<\/tr>\n
getTagContent<\/td>\n
solicita o conte\u00fado do TAG que identifica o dia (por padr\u00e3o ele j\u00e1 est\u00e1 preenchido com o numero do dia.\u00a0 caso esta chamada devolva algum valor, o TAG padr\u00e3o ser\u00e1 substituido)<\/td>\n
html\u00a0ou null<\/td>\n<\/tr>\n
DOMReleased<\/td>\n
indica que o DOM est\u00e1 livre para ser usado.<\/td>\n
null<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Pense em qualquer tipo de aplicativo e em algum momento voc\u00ea vai ter que representar o fluxo do tempo no mesmo.\u00a0 Mais especificamente, quase sempre vai ter que ter algum tipo de agenda ou planificador temporal. O exemplo de hoje pretende introduzir o jeito de fazer um calend\u00e1rio com YeAPF sem morrer na tentativa.\u00a0 Com […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[],"tags":[55,56],"jetpack_featured_media_url":"","jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p5O6UV-Y","jetpack-related-posts":[{"id":78,"url":"http:\/\/www.yeapf.com\/wp\/?p=78","url_meta":{"origin":60,"position":0},"title":"Drag and drop sobre um calend\u00e1rio YeAPF","date":"mar\u00e7o 30, 2014","format":false,"excerpt":"Espero que tenha em mente o post anterior sobre como construir um calend\u00e1rio b\u00e1sico com YeAPF. Este exemplo visa habilitar a fun\u00e7\u00e3o arrastar e soltar de uma lista ul para um calend\u00e1rio e precisa de dois arquivos: testarCalendario.css e testarCalendario.html. Partimos do suposto que o YeAPF est\u00e1 em \/var\/www\/YeAPF e\u2026","rel":"","context":"Post similar","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":454,"url":"http:\/\/www.yeapf.com\/wp\/?p=454","url_meta":{"origin":60,"position":1},"title":"Node + Electron + YeAPF","date":"agosto 3, 2018","format":false,"excerpt":"Saladas s\u00e3o boas. Por isso o t\u00edtulo mistura tr\u00eas coisas que j\u00e1 sozinhas s\u00e3o boas. O node te permite escrever aplicativos do lado do servidor ou do cliente usando a mesma linguagem: JavaScript. Neste vamos usa-lo para criar um aplicativo do lado cliente com t\u00e9cnicas de web (HTML5, CSS3 e\u2026","rel":"","context":"Em "Desenvolvimento"","img":{"alt_text":"","src":"https:\/\/i2.wp.com\/www.yeapf.com\/wp\/wp-content\/uploads\/2018\/08\/Mixed-Green-Salad-with-Eggs-3-930x543.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":184,"url":"http:\/\/www.yeapf.com\/wp\/?p=184","url_meta":{"origin":60,"position":2},"title":"Exemplo - web01 - OnePage YeAPF Web Application","date":"dezembro 26, 2014","format":false,"excerpt":"Esta \u00e9 uma das continua\u00e7\u00f5es deste artigo. Por que criar aplicativos mono p\u00e1gina? Bom, a grande virtude de um aplicativo mono p\u00e1gina \u00e9 que tudo o que voc\u00ea precisar est\u00e1 pronto assim que o usu\u00e1rio carregou a p\u00e1gina inicial e caso sejam necess\u00e1rias mais p\u00e1ginas, formul\u00e1rios, tabelas elas tamb\u00e9m podem\u2026","rel":"","context":"Em "Desenvolvimento"","img":{"alt_text":"","src":"https:\/\/i2.wp.com\/www.yeapf.com\/wp\/wp-content\/uploads\/2019\/05\/office-932926_1920.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":39,"url":"http:\/\/www.yeapf.com\/wp\/?p=39","url_meta":{"origin":60,"position":3},"title":"Ajax com YeAPF","date":"mar\u00e7o 3, 2014","format":false,"excerpt":"Pretendo deixar cada uma das postagens o mais simples poss\u00edvel.\u00a0 Mas, n\u00e3o \u00e9 poss\u00edvel proceder com este se antes voc\u00ea n\u00e3o instalou e configurou seu ambiente de desenvolvimento e o YeAPF.\u00a0 Este post (http:\/\/inovacaosistemas.com.br\/wp\/?p=25) lhe pode ajudar a fazer isso, caso n\u00e3o o tenha feito ainda. Introdu\u00e7\u00e3o Nos prim\u00f3rdios da\u2026","rel":"","context":"Post similar","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":370,"url":"http:\/\/www.yeapf.com\/wp\/?p=370","url_meta":{"origin":60,"position":4},"title":"Reagindo a mudan\u00e7as de abas","date":"novembro 29, 2017","format":false,"excerpt":"As abas s\u00e3o o dispositivo que o YeAPF entrega para um desenvolvedor poder construir aplicativo \"mono-p\u00e1gina\" como os usados em aplicativos Web de \u00faltima gera\u00e7\u00e3o ou em dispositivos m\u00f3veis. S\u00e3o elas as que nos permitem uma mudan\u00e7a r\u00e1pida na tela sem que por isso seja necess\u00e1rio carrega-las do servidor j\u00e1\u2026","rel":"","context":"Em "Desenvolvimento"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":288,"url":"http:\/\/www.yeapf.com\/wp\/?p=288","url_meta":{"origin":60,"position":5},"title":"Um ambiente de desenvolvimento YeAPF usando Windows","date":"mar\u00e7o 28, 2016","format":false,"excerpt":"Quase que todas as vezes que postamos alguma coisa o fazemos tomando como base uma instala\u00e7\u00e3o Linux. Por\u00e9m, na medida em que alguns novos usu\u00e1rios est\u00e3o ainda usando Windows, se torna necess\u00e1rio um pequeno roteiro para facilitar a vida. Escrevemos estas linhas tomando como base uma instala\u00e7\u00e3o sobre XP (Obvio\u2026","rel":"","context":"Em "Desenvolvimento"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"http:\/\/www.yeapf.com\/wp\/index.php?rest_route=\/wp\/v2\/posts\/60"}],"collection":[{"href":"http:\/\/www.yeapf.com\/wp\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.yeapf.com\/wp\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.yeapf.com\/wp\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.yeapf.com\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=60"}],"version-history":[{"count":20,"href":"http:\/\/www.yeapf.com\/wp\/index.php?rest_route=\/wp\/v2\/posts\/60\/revisions"}],"predecessor-version":[{"id":163,"href":"http:\/\/www.yeapf.com\/wp\/index.php?rest_route=\/wp\/v2\/posts\/60\/revisions\/163"}],"wp:attachment":[{"href":"http:\/\/www.yeapf.com\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=60"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.yeapf.com\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=60"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.yeapf.com\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=60"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}