Calendário para Web… um desafio…?

Durante este último mês apresentou-se perante mim a oportunidade de desenvolver um calendário para Web que tivesse um funcionamento mais parecido com células do nosso conhecido “Microsoft Excel”. À partida, tal parece problemático, a não ser que ponhamos a séria hipótese de usar o nosso maior aliado para este fim: Javascript.

O Javascript permite-nos basear a funcionalidade do calendário mais em Client-Side do que em Server-Side, facilitando-nos variadas tarefas como mudar de cores ou fazer display de mensagens no ecrã – isto sem termos de submeter os dados regularmente.

Resta dizer que, apesar de ser um desafio, é bastante exequível, desde que partamos do pressuposto que vamos usar mais Javascript do que é habitual em maior parte das Web applications.

Segue-se um exemplo bastante simples da utilização de Javascript para adicionar funcionalidade a um calendário:

Code Snippet

1. <script type=“text/javascript” language=“javascript”>
3.    var daysToShow;
4.    
5.     function jsChangeColor(textBoxObj, parentCellID, daysRemaining, totalDays, originalValue) {
7.         var radioButton = document.getElementById(“<%=this.radioBtnControl.ClientID %>”);
8.         
9.         if (radioBtnControl.checked)
10.         {
11.             
12.             if (daysToShow == undefined)
13.             {
14.                 daysToShow = daysRemaining;
15.             }
17.             textBoxObj = document.getElementById(textBoxObj);
18.             var textBoxValue = parseInt(textBoxObj.value);
19.             var DBValue = originalValue;
21.             if (textBoxValue == 10)
22.             {
23.                 textBoxObj.value = 7;
24.                 ColorCells(textBoxObj.value, parentCellID);
26.                 document.getElementById(“<%=this.labelToShowValue.ClientID %>”).innerHTML = “( “ + daysToShow + “/” + totalDays + ” )”;
28.                 FillHdnField(daysToShow);
30.                 objInputBuffer = document.getElementById(“<%=this.textBoxToReceiveChangedValues.ClientID %>”);
32.                 var mynewvalue = textBoxObj.id + “=” + textBoxObj.value + “/” + DBValue + “;”;
33.                 objInputBuffer.value = objInputBuffer.value.replace(textBoxObj.id + “=” + textBoxValue + “/” + DBValue + “;”, “”);
34.                 objInputBuffer.value = mynewvalue + objInputBuffer.value;
35.             }
36.        }
37.        
38.        function ColorCells(cellObjectValue, parentCellID)
39.        {
41.              document.getElementById(parentCellID).style.background = “”;
42.     
43.              switch (parseInt(cellObjectValue))
44.              {
45.                 
46.                  case 1:
47.                      GetColorString(“#3F8FFF”, parentCellID, true);
48.                      break;
49.                  case 2:
50.                      GetColorString(“#FFF65E”, parentCellID, true);
51.              }
52.        }
53.        
54.        function GetColorString(colorString, parentCellID, isBackColor)
55.         {
56.             if(isBackColor)
57.             {
58.                 document.getElementById(parentCellID).style.backgroundColor = colorString;
59.             }
60.             else
61.             {
62.                 document.getElementById(parentCellID).style.background = colorString;
63.             }
64.         }
65.         
66.         function FillHdnField(finalValue)
67.         {
68.             document.getElementById(“<%= this.hiddenField.ClientID %>”).value = finalValue;
69.         }
71. </script>

A função jsChangeColor recebe vários parâmetros e caso o radioButton esteja checked, processa e passa a colorir uma célula do calendário.

Resumindo, resta mais uma vez sublinhar o quão importante é compreendermos que o Javascript, embora “assuste” alguns programadores, é um aliado imprescindível para este tipo de controlos.

Isto não significa que a utilização do controlo de calendário de ASP .NET não tenha a sua quota de dificuldade. É um controlo que tem algumas limitações quanto à extensão da sua funcionalidade de base, como podemos ver na situação engraçada que se segue: