ASP NET Calendário(Calendar)
Selection Mode : None
Anteriordezembro de 2024Próximo
domsegterquaquisexsáb
24252627282930
1234567
891011121314
15161718192021
22232425262728
2930311234
   
Selection Mode : Day
Anteriordezembro de 2024Próximo
domsegterquaquisexsáb
24252627282930
1234567
891011121314
15161718192021
22232425262728
2930311234
   
Selection Mode : DayWeek
Anteriordezembro de 2024Próximo
domsegterquaquisexsáb
SelWeek24252627282930
SelWeek1234567
SelWeek891011121314
SelWeek15161718192021
SelWeek22232425262728
SelWeek2930311234
   
Selection Mode : DayWeekMonth
Anteriordezembro de 2024Próximo
SelMesdomsegterquaquisexsáb
SelWeek24252627282930
SelWeek1234567
SelWeek891011121314
SelWeek15161718192021
SelWeek22232425262728
SelWeek2930311234

Restrições deste controle

Caso deseje navegar por muitos meses ou até mesmo anos este controle não ajuda muito. Precisamos fazer com que outro controle faça isso ou o usuário terá que digitar centenas de vezes o botão próximo mês ou mês anterior. Demora muito porque a cada click é feito um postback do controle que vai para o servidor e volta.

Parâmetro mais importante : O que desejamos selecionar

Num controle do calendário 98% das vezes queremos selecionar um dia do mês. Contudo algumas vezes precisamos outras coisas do calendário e para isto utilizaremos o parâmetro 'Selection Mode' que pode ser :
1-Day : Dia .
2-DayWeek : Dia da Semana.
3-DayWeekMonth : Dia da Semana e Mês.
4-None : Default. Utilizar quando desejamos exibir o calendário mas não queremos selecionar nada dele.
É o único que não aparece os sublinhados abaixo dos dias da semana mas aí tabém não podemos clicar e selecionar um dia do mês ou algo parecido.

Parâmetros do Calendário

No HTML5 esse controle perdeu seu valor porque temos o input type:calendar no HTML5 que faz exatamente esta funcionalidade. Contudo existe alguns detalhes que ainda dão uma leve vantagem a este controle porque ele é dinâmicamente renderizado no servidor e com isso seu 'script' é adequado ao navegador se bem que um bootstrap também faz isso.

Se você deixar os defaults o calendário exibido é bem feio. Aconselho a remodelar seu visual. Um tom cinza sinistro.

O que eu acho pior é o sublinhado que é exibido embaixo de tudo (Mês Anterior, Mês Posterior, Dias do Mês porque ao clicar neles irá gerar um postback para tratamento do controle no servidor. Este sublinhado é horrível. Utilize o parâmetro SelectionMode="None" para remover esse sublinhado do link dos dias contudo não remove os subinhados dos links do mês anterior e posterior.

O controle calendário está dividido em partes que são :
1-Caption : É o espaço logo acima do calendário.
2-Header : É a parte superior do calendário onde são exibidos os parâmetros correntes do controle como Mês/Ano.
3-DayHeader : É a linha logo acima do número do dia no mês onde são exibidos os dias da semana (dom....sáb).
4-Day : É a região onde os dias do Mês são exibidos.
5-Font : É a fonte das letras do calendário.

A propriedade 'Caption' é a mensagem que é exibida sobre o Calendario.

A propriedade 'CaptionAlign' define aonde a mensagem 'Caption' deverá ser exibida. Se for 'NoSet' será usada a 'Top' que exibe a mensagem na em cima do Calendário. Poderá ser também Rodapé/Abaixo(Bottom), à Esquerda (Left) ou à direita(Right). Cuidado com Left e Right porque se seu calendário está alinhado ao centro, por exemplo, essas propriedades não irão funcionar, será alinhado ao centro mesmo.

O parâmetro Primeiro dia da semana ('FirstDayOfWeek') quando utilizamos o valor 'Default' segue a definição da linguagem do browser que, no Brasil/Português é Domingo.

O parâmetro 'NextPrevFormat' (formato do mês anterior e posterior) define como serão os exibidos para navegar para o próximo mês ou mês anterior. Se for :
1-CustomText: No botão será exibido um texto que normalmente é < para mês anterior e > para mês posterior. Os caracteres a serem exibidos são definidos pelos parâmetros 'NextMonth Text' e 'Previous MonthText' ...

O parâmetro 'Próximo mês'(NextMonth Text) é exibido o caractere > dado pelo default &gt;

O parâmetro 'Mês anterior'(Previous MonthText) é exibido o caractere < dado pelo default &lt;

2-FullMonth : Será exibido o nome do mês anterior/posterior no botão por completo.
3-ShortMonth : Será exibido os 3 primeiros caracteres do nome do mês anterior/posterior no botão.

O parâmetro ShowGridLines exibe ou não as linhas que separam os dias do calendário. Depende do estilo da página.

O parâmetro DayNameFormat="Full" exibe o nome completo do dia da semana. O default é 'Short' onde exibe o dia da semana sem o '-feira'. Mas pode ser :
1-A primeira letra do nome do dia(FirstLetter> : D S T Q Q S S D.
2-As duas primeiras letraas do nome do dia(FirstTwoLetters) : DO SE TE QA QI SE SA DO.
3-O nome completo (Full) : Domingo, Segunda-Feira, Terça-Feira.....Sábado.
4-O nome resumido (Shortest) : É o dia da semana sem o '-feira' : Domingo, Segunda, Terça, Quarta....Sábado.

Caso queira forçar o primeiro dia da semana utilize o parâmetro FirstDayOfWeek. O default é o do idioma do browser mas você pode forçar e colocar igual a "Sunday" se quiser deixar no padrao PT-BR.

Se você quiser mudar a cor do titulo utilize o parâmetro TitleStyle e BackColor e ForeColor.

Se quiser mudar o estilo como os dias do calendário são exibidos utilize o parâmetro DayStyle e os parametros BackColor e Forecolor novamente.

Caso deseje destacar o dia selecionado no calendário utilize o parâmetro SelectedDayStyle e os atributos BackColor, ForeColor e Font-Bold. Note que ao carregar a página o dia selecionado será o dia de hoje.

Caso deseje mudar o formato como o dia de hoje é exibido utilize o parâmtro TodayDayStyle e os atributos BackColor, ForeColor e Font-Bold.

Se quiser destacar os dias do final de semana utilize o parâmetro WeekendDayStyle. É costume no Brasil colocar a cor Vermelha nesses itens.

Caso queira formatar o tamanho do calendário utilize os parâmetros Height e Width. Todos os elementos dentro do calendário terão seus tamanhos recalculados para caberem nessa dimensão exatamente.

Caso no Calendar seja possível selecionar o mês (SelectionMode="DayWeekMonth" ou SelectWeekText="SelWeek") o parâmetro SelectMonthText conterá o string que deverá ser exibido na caixa de seleção do Mês. O default é >> mas podemos colocar qualquer texto. Coloquei SelMes para fins didáticos.

Caso no Calendar seja possível selecionar a semana (SelectionMode="DayWeekMonth" ou SelectWeekText="SelWeek") o parâmetro SelectMonthText conterá o string que deverá ser exibido na caixa de seleção da Semana. O default é > mas podemos colocar qualquer texto. Coloquei SelSem para fins didáticos.

Ao clicar no SelMes ou SelWeek o conjunto de dias abrangido pela seleção é hachurado automaticamente pelo controle.