Início > ASP.NET > Criando um Calendário com Legendas

Criando um Calendário com Legendas

Vamos criar um calendário que possui legendas em algumas datas especiais, como na figura abaixo:

calendar

Para isso, vamos criar um Projeto ASP.NET.

Abra o Visual Studio, clique no menu File > New > Project e escolha a opção ASP.NET Web Application.

Uma página Default.aspx será criada. Nela, adicione um controle Calendar, através da Toolbox, que geralmente

fica à esquerda:

toolbar

Clique com o botão direito sobre a página e selecione a opção View Code, para ir ao arquivo code-behind da página.

Vamos adicionar algumas linhas de código ao arquivo, começando por um atributo que servirá para armazenarmos os

valores da legenda que será apresentada em sua respectiva data:

//Tabela hash data - legenda
private Hashtable cronograma = new Hashtable();

Criemos agora um método que irá preencher a hashtable com as legendas, escolhendo algumas datas especiais. Você pode

modificar a data e a legenda e adicionar mais legendas à outras datas.

private void GetCronograma()
{
    this.cronograma[DateTime.Today.ToShortDateString()] = "Dia de Hoje!";
    this.cronograma["25/12/2010"] = "Natal";
    this.cronograma["31/12/2010"] = "Ano Novo";
    this.cronograma["30/06/2010"] = "Férias";
}

Vamos precisar configurar o nosso calendário para apresentar a legenda. Para isso usamos o seguinte código no evento Page_Load da página Default.aspx:

protected void Page_Load(object sender, EventArgs e)
{
    this.GetCronograma();
    //define o posicionamento das informações contidas na célula do calendário
    this.MeuCalendario.DayStyle.HorizontalAlign = HorizontalAlign.Center;
    this.MeuCalendario.DayStyle.VerticalAlign = VerticalAlign.Top;
    //define a largura da célula do calendário
    this.MeuCalendario.DayStyle.Width = new Unit(90);
    //define a altura da célula do calendário</span>
    this.MeuCalendario.DayStyle.Height = new Unit(30);
    //define a data atual do calendário
    this.MeuCalendario.TodaysDate = DateTime.Today;
    //define a data que é mostrada inicialmente pelo calendário
    this.MeuCalendario.VisibleDate = this.MeuCalendario.TodaysDate;
}

Agora, vamos voltar ao modo Design da nossa página Default.aspx, para adicionar um evento ao nosso controle Calendar.

Clique com o botão direito sobre o controle Calendar e escolha a opção Properties:

prop

Note que o calendário mostrado pela imagem acima está com algumas cores definidas. Você pode configurar o estilo do

seu calendário usando as propriedades na barra de Propriedades. Use a criatividade!

Na lista de Propriedades, clique sobre o Raio, que aparece na parte superior da barra, para ver a lista de eventos do controle:

events

Clique duas vezes sobre o Evento DayRender. Isso irá adicionar algumas linhas ao código da página Default.aspx.

Insira o código abaixo, no evento DayRender:

protected void MeuCalendario_DayRender(object sender, DayRenderEventArgs e)
{
    //adiciona quebra de linha depois do número do dia
    Literal lit = new Literal();
    lit.Visible = true;
    lit.Text = "&lt;br/&gt;";
    e.Cell.Controls.Add(lit);

    if(this.cronograma[e.Day.Date.ToShortDateString()] != null)
    {
        //adiciona a legenda usando a hashtable
        Label lbl = new Label();
        lbl.Visible = true;
        lbl.Text = (string)this.cronograma[e.Day.Date.ToShortDateString()];
        e.Cell.Controls.Add(lbl);
    }

}
Esse código adiciona um controle Literal para quebra de linha. Dessa forma, nossa legenda será desenhada abaixo

do número do seu respectivo dia. Um controle Label também é inserido, criando a legenda, usando os dados do hashtable.

Rode a aplicação. Temos agora um calendário com legendas!

 

Download do projeto

Anúncios
Categorias:ASP.NET
  1. Nenhum comentário ainda.
  1. No trackbacks yet.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: