Ver en PHP
Hoy quiero mostrarles como dibujar un calendario HTML como este:
El proceso no es muy complicado. Primero, agregamos una página ASP.Net con el nombre "calendario.aspx", con el siguiente código:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="calendar.aspx.cs" Inherits="examples_calendar" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TyroDeveloper</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<style type="text/css">
.cal-day-empty {
background-color: #DDDDDD;
}
.cal-day {
position:relative;
float:left;
top:0px;
left:0px;
display:block;
height:20px;
width:20px;
padding:0;
margin:0px;
border-bottom: 1px solid silver;
border-right: 1px solid silver;
}
</style>
</head>
<body>
<form id="frmCalendario" runat="server">
<div class="container">
<br />
<asp:Literal ID="litCalendario" runat="server"></asp:Literal>
</div>
</form>
</body>
</html>
using System;
using System.Text;
using System.Web.UI;
public partial class examples_calendar : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack) {
for (int i = 1; i <= 12; i++) {
litCalendario.Text += DibujarMes(2017,i);
}
}
}
protected string DibujarMes(int year, int month)
{
StringBuilder cal = new StringBuilder();
double totalDias = DateTime.DaysInMonth(year, month);
DateTime fechaIni = new DateTime(year, month, 1);
int diaInicial = ObtenerNumeroDia(fechaIni);
int diaSemana = 1;
cal.Append("<table class='table table-bordered'>");
cal.Append(String.Format("<thead>" +
"<tr><th colspan='7' class='text-center'>{0}</th></tr>" +
"<tr> " +
" <th class='text-center'>LUNES</th>" +
" <th class='text-center'>MARTES</th>" +
" <th class='text-center'>MIÉRCOLES</th>" +
" <th class='text-center'>JUEVES</th>" +
" <th class='text-center'>VIERNES</th>" +
" <th class='text-center'>SÁBADO</th>" +
" <th class='text-center'>DOMINGO</th>" +
"</tr>" +
"</thead>", ObtenerMes(month)));
cal.Append("<tbody>");
cal.Append("<tr>");
for (int i = 1; i < diaInicial; i++)
{
cal.Append(String.Format("<td class='cal-day-empty'><div class='cal-day'>{0:dd}</div></td>",
fechaIni.AddDays(i - diaInicial)));
diaSemana++;
}
for (int i = 0; i <= totalDias - 1; i++)
{
cal.Append(String.Format("<td>" +
"<div class='cal-day'>{0:dd}</div>" +
"<br />Contenido" +
"</td>", fechaIni.AddDays(i)));
if (fechaIni.AddDays(i).DayOfWeek == DayOfWeek.Sunday)
{
cal.Append("</tr><tr>");
diaSemana = 1;
}
diaSemana++;
}
if (fechaIni.AddDays(totalDias - 1).DayOfWeek != DayOfWeek.Sunday)
{
int dia = 0;
for (int j = diaSemana - 1; j <= 7; j++)
{
cal.Append(String.Format("<td class='cal-day-empty'><div class='cal-day'>{0:dd}</div></td>",
fechaIni.AddDays(totalDias + dia)));
dia++;
}
}
cal.Append("</tr>");
cal.Append("</tbody>");
cal.Append("</table>");
return cal.ToString();
}
int ObtenerNumeroDia(DateTime fecha) {
switch (fecha.DayOfWeek) {
case DayOfWeek.Monday:
return 1;
case DayOfWeek.Tuesday:
return 2;
case DayOfWeek.Wednesday:
return 3;
case DayOfWeek.Thursday:
return 4;
case DayOfWeek.Friday:
return 5;
case DayOfWeek.Saturday:
return 6;
case DayOfWeek.Sunday:
return 7;
default:
return 0;
}
}
string ObtenerMes(int mes) {
string[] meses = {
"ENERO",
"FEBRERO",
"MARZO",
"ABRIL",
"MAYO",
"JUNIO",
"JULIO",
"AGOSTO",
"SEPTIEMBRE",
"OCTUBRE",
"NOVIEMBRE",
"DICIEMBRE" };
if ((mes >= 1) && (mes <= 12))
{
return meses[mes-1];
}
else {
return "";
}
}
}
Si alguien de ustedes encuentra una mejor manera de hacerlo, por favor compartir.
No hay comentarios:
Publicar un comentario