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

 <script type=“text/javascript” language=“javascript”>
 
    var daysToShow;
    
     function jsChangeColor(textBoxObj, parentCellID, daysRemaining, totalDays, originalValue) {
 
         var radioButton = document.getElementById(“<%=this.radioBtnControl.ClientID %>”);
         
         if (radioBtnControl.checked) 
         {
             
             if (daysToShow == undefined) 
             {
                 daysToShow = daysRemaining;
             }
 
             textBoxObj = document.getElementById(textBoxObj);
             var textBoxValue = parseInt(textBoxObj.value);
             var DBValue = originalValue;
 
             if (textBoxValue == 10) 
             {
                 textBoxObj.value = 7;
                 ColorCells(textBoxObj.value, parentCellID);
 
                 document.getElementById(“<%=this.labelToShowValue.ClientID %>”).innerHTML = “( “ + daysToShow + “/” + totalDays + ” )”;
 
                 FillHdnField(daysToShow);
 
                 objInputBuffer = document.getElementById(“<%=this.textBoxToReceiveChangedValues.ClientID %>”);
 
                 var mynewvalue = textBoxObj.id + “=” + textBoxObj.value + “/” + DBValue + “;”;
                 objInputBuffer.value = objInputBuffer.value.replace(textBoxObj.id + “=” + textBoxValue + “/” + DBValue + “;”, “”);
                 objInputBuffer.value = mynewvalue + objInputBuffer.value;
             }
        }
        
        function ColorCells(cellObjectValue, parentCellID)
        {
 
              document.getElementById(parentCellID).style.background = “”;
     
              switch (parseInt(cellObjectValue))
              {
                 
                  case 1:
                      GetColorString(“#3F8FFF”, parentCellID, true);
                      break;
                  case 2:
                      GetColorString(“#FFF65E”, parentCellID, true); 
              }
        }
        
        function GetColorString(colorString, parentCellID, isBackColor)
         {
             if(isBackColor)
             {
                 document.getElementById(parentCellID).style.backgroundColor = colorString;
             }
             else
             {
                 document.getElementById(parentCellID).style.background = colorString;
             }
         }
         
         function FillHdnField(finalValue) 
         {
             document.getElementById(“<%= this.hiddenField.ClientID %>”).value = finalValue;
         }
 
 </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:

The Problem

You have been tasked to create a time off tool request involving some pretty complicated things. Your boss has asked for numerous features in this tool which you hoped he had never asked.

Da Boss

I want it to highlight specific days signaling holidays or time off requests. This helps me visualize what type of day the request is. Color coding is a plus .

I’d like some nice mouse over effect on days that are not requested. This helps the user notice a clickable type of cell.

O I dunno…I’d like to not only see a monthly view, but a yearly view so that I can quickly glance over an entire year for an employee.

O well…I dunno…Impress me…maybe allow a user to click a day on the calendar and have it go to a page with that calendar day being selected.

Umm you know the simple things..besides you have all the tools that the company has purchased for you.

You

Thoughts to self: ***O NO NOT THE CALENDAR CONTROL…BUT CANT WE JUST BUY SOMETHING PRE MADE***

Boss

O by the way…we don’t have any money to buy any third party tools…have a great day. Don’t forget to e-mail when its all done.

You

O certainly boss…*cringe*…this should be no sweat *thank God I wore deodorant*. Quickly images begin flashing in your head about what your boss said:

"I want it to highlight specific days signaling holidays or time off requests. This helps me visualize what type of day the request is. Color coding is a plus ."

"I’d like some nice mouse over effect on days that are not requested. This helps the user notice a clickable type of cell."

"O I dunno…I’d like to not only see a monthly view, but a yearly view so that I can quickly glance over an entire year for an employee."

"O well…I dunno…Impress me…maybe allow a user to click a day on the calendar and have it go to a page with that calendar day being selected."

**Ok that one is simple response.redirect and send a query string**

How in the world am I going to do all of these with the ASP.net calendar control? That control is just so dull, so plain, difficult to use.