O X do Xamarin Forms — Calendar View

Image for post
Image for post

iFala galera,

Tudo beleza?

Há algumas semanas precisei fazer um MVP (Minimum Viable Product -Produto Mínimo Viável , isso vai dar uma confusão hahaha) para um projeto com Xamarin.Forms. Esse MVP precisava de uma tela de agendamento com Calendário.

Por ser necessário uma certa velocidade na entrega dessa POC acabei procurando algum controle que me atendesse de forma rápida e apenas temporaria.. mas acabei encontrando um controle que me atendia de forma definitiva e esse é o Xamarin.Plugin.Calendar.

Hoje vamos ver como utiliza-lo para seus projetos Xamarin.Forms.

Então bora !!

Image for post
Image for post

Vamos ao Nuget instalar o pacote Xamarin.Plugin.Calendar :

Image for post
Image for post

Mais fácil impossível não é?

Para nos ajudar na utilização vamos criar uma Model de Evento que será responsável por guardar nosso “compromisso” :

Agora vamos criar nossa tela com o controle, para isso vamos usar o namespace : xmlns:controls=”clr-namespace:Xamarin.Plugin.Calendar.Controls;assembly=Xamarin.Plugin.Calendar” :

Essa é a forma mais “simples” de utilizar esse controle, a propriedade Events fica responsável por inserirmos nosso DataSource de eventos e o DataTemplate nos permite criar um pequeno controle para demostrar algumas informações (veremos a seguir).

Agora vamos criar a ViewModel para carregar nossos eventos :

O segredo aqui esta na EventCollection, ela vai alimentar a propriedade Events.

O Model utilizado nela tanto faz, como podem ver eu criei um chamado evento. O que importa é definir uma Data para inserir no Evento , no meu caso eu criei varias e o Resultado é :

Image for post
Image for post

Os pontos Rosas são meus compromissos e você ainda consegue ver abaixo o conteúdo que configuramos no DataTemplate. Ele vai mostrar o conteúdo do dia selecionado.

Certo mais se eu quiser Alterar o Mês em cima, mudar as cores e etc. É possível?

O Controle nos entrega altas possibilidades de customização :

É possível customizar Cor selecionada, cor do dia, da barra la em cima ..etc …

Vamos alterar um pouco nosso Xaml :

Notem que mudou as cores :

Image for post
Image for post

Além disso o controle conta com eventos pra tudo que você precisa :

SwipeUpCommand, SwipeLeftCommand, SwipeRightCommand , SelectedDate ,DayTappedCommand … Ou seja você consegue realizar ações em praticamente todo o controle.

Então teste todas as possibilidades de customização e veja como esse controle é incrível.

Pra fechar a pergunta que todo mundo vai fazer , poxa mais esta em inglês é possível deixar em português? A resposta é sim!!!!

O Calendário possui uma propriedade chamada Culture que nos permite realizar essa alteração :

Image for post
Image for post

Incrível não?

Caso queira baixar o exemplo utilizado no artigo clique aqui.

Também vou deixar como dica o Canal do meu Amigo Ione Souza (Mago do Xaml) porque ele vai criar um controle de Calendário novo.

Quer ver outros artigos sobre Xamarin ? Clique aqui.

Quer assistir lives bem legais de Xamarin e .net? Clique aqui.

Perdeu alguma Live de Xamarin ou .net? Você pode conferir elas no Meu canal clicando aqui.

Espero ter ajudado!

Aquele abraço!

Written by

Microsoft MVP,Gamer, Desenvolvedor e apaixonado por tecnologia!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store