Menú jcyl.es

Junta de Castilla y León

Catálogo de componentes - Junta de Castilla y León

  • Zona privada
  • Contacto

Idiomas

Menu jcyl.es

Mi cuenta

usuario2017xxx

usuario@gmail.com

Mi cuenta

Cerrar sesión

Guía de estilos y componentesde la Junta de Castilla y León

Redes sociales

  • Facebook
  • Twitter
  • Youtube

Calendario

Completo

Enero
lu ma mi ju vi do
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31

Histórico de convocatorias

Selecciona mes y año

Eventos

Responsividad

La parte del búsqueda del componente, calendario y selector de fechas se colocarán en dos columnas por encima de los 800px. En 800px y menos se colocarán cada uno en una fila ocupando todo el ancho disponible.

La parte de resultados, como texto que es, fluirá ocupando todo el ancho disponible.

La paginación fluira centrada y e línea según el espacio disponible.

Código

						
<div class="calendario">
	<table>
		<caption>[Mes]</caption>
		<tr>
			<th abbr="Lunes">lu</th>
			<th abbr="Martes">ma</th>
			<th abbr="Miércoles">mi</th>
			<th abbr="Jueves">ju</th>
			<th abbr="Viernes">vi</th>
			<th abbr="Sábado">sá</th>
			<th abbr="Domingo">do</th>
		</tr>
		<tr>
			<td> </td>
			<td> </td>
			<td> </td>
			<td> </td>
			<td> </td>
			<td> </td>
			<td>1</td>
		</tr>
		<tr>
			<td>2</td>
			<td>3</td>
			<td>4</td>
			<td>5</td>
			<td>6</td>
			<td>7</td>
			<td>8</td>
		</tr>
		<tr>
			<td class="actual">9</td>
			<td>10</td>
			<td class="seleccionado">11</td>
			<td>12</td>
			<td class="actual seleccionado">13</td>
			<td>14</td>
			<td><a href="">15</a></td>
		</tr>
		<tr>
			<td>16</td>
			<td>17</td>
			<td>18</td>
			<td>19</td>
			<td>20</td>
			<td>21</td>
			<td>22</td>
		</tr>
		<tr>
			<td>23</td>
			<td>24</td>
			<td>25</td>
			<td>26</td>
			<td>27</td>
			<td>28</td>
			<td>29</td>
		</tr>
		<tr>
			<td>30</td>
			<td>31</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</table>
	<div class="calendario-buscador">
		<h2>Histórico de convocatorias</h2>
		<form action="" method="post">
			<fieldset>
				<legend>Selecciona mes y año</legend>
				<label for="mes" class="elemento-invisible">Mes</label>
				<select id="mes">
					<option value="[Mes]">[Mes]</option>
					[Meses]
				</select>
				<label for="anyo" class="elemento-invisible">Año</label>
				<select id="mes">
					<option value="[Año]">[Año]</option>
					[Años]
				</select>
			</fieldset>
			<input id="aceptar" name="aceptar" value="Buscar" type="submit" class="boton">
		</form>
	</div>
	<div class="calendario-resultados">
		<h3>Eventos</h3>
		<ul>
			<li>
				<p class="fecha">
					<span class="dia">[Fecha]</span>
					<span class="hora">[Hora]</span>
				</p>
				<p class="tipo">[Tipo]</p>
				<p>[Texto]</p>
				[Más texto]
			</li>
		</ul>
	</div>
</div>
<div class="paginacion">
	<p>Página X de Y</p>
	<ul>
		<li class="primera"><a href=""><span class="elemento-invisible">Primera página</span>&lt;&lt;</a></li>
		<li class="anterior"><a href=""><span class="elemento-invisible">Página anterior</span>&lt;</a></li>
		<li><a href=""><span class="elemento-invisible">Página </span>[X]</a></li>
		<li class="siguiente"><a href=""><span class="elemento-invisible">Página siguiente</span>&gt;</a></li>
		<li class="ultima"><a href=""><span class="elemento-invisible">Última página</span>&gt;&gt;</a></li>
	</ul>
</div>
						
					

Compacto

Enero

lu ma mi ju vi do
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31          

Eventos del mes

Filtrar eventos

Selecciona mes y año

Responsividad

El calendario y los resultados se colocarán en dos columnas por encima de los 800px. En 800px y menos se colocarán cada uno en una fila ocupando todo el ancho disponible.

Los botones se colocarán en línea por encima de 600px. Por debajo de 600px se colocará en dos líneas, en una los selectores y otra para el botón de buscar. Si los selectores no dispusiesen de espacio se colocarían cada uno en una fila.

Código

						
<div class="calendario mini">
	<h2>[Mes]</h2>
	<table>
		<tr>
			<th abbr="Lunes">lu</th>
			<th abbr="Martes">ma</th>
			<th abbr="Miércoles">mi</th>
			<th abbr="Jueves">ju</th>
			<th abbr="Viernes">vi</th>
			<th abbr="Sábado">sá</th>
			<th abbr="Domingo">do</th>
		</tr>
		<tr>
			<td> </td>
			<td> </td>
			<td> </td>
			<td> </td>
			<td> </td>
			<td> </td>
			<td>1</td>
		</tr>
		<tr>
			<td>2</td>
			<td>3</td>
			<td>4</td>
			<td>5</td>
			<td>6</td>
			<td>7</td>
			<td>8</td>
		</tr>
		<tr>
			<td class="actual">9</td>
			<td>10</td>
			<td>11</td>
			<td>12</td>
			<td>13</td>
			<td>14</td>
			<td>15</td>
		</tr>
		<tr>
			<td>16</td>
			<td>17</td>
			<td>18</td>
			<td>19</td>
			<td>20</td>
			<td>21</td>
			<td>22</td>
		</tr>
		<tr>
			<td>23</td>
			<td>24</td>
			<td>25</td>
			<td>26</td>
			<td>27</td>
			<td>28</td>
			<td>29</td>
		</tr>
		<tr>
			<td>30</td>
			<td>31</td>
			<td> </td>
			<td> </td>
			<td> </td>
			<td> </td>
			<td> </td>
		</tr>
	</table>
	<div class="calendario-resultados">
		<h3>Eventos del mes</h3>
		<ul>
		</ul>
	</div>
	<div class="calendario-buscador">
		<h3 class="elemento-invisible">Filtrar eventos</h3>
		<form action="[action]" method="post">
			<fieldset>
				<legend class="elemento-invisible">Selecciona mes y año</legend>
				<label for="mes" class="elemento-invisible">Mes</label>
				<select id="mes">
					<option value="[Mes]">[Mes]</option>
					[Meses]
				</select>
				<label for="anyo" class="elemento-invisible">Año</label>
				<select id="mes">
					<option value="[Año]">[Año]</option>
					[Años]
				</select>
			</fieldset>
			<input id="aceptar" name="aceptar" value="Buscar" type="submit" class="boton">
		</form>
	</div>
</div>
						
					

Este buscador ejecuta una búsqueda por AJAX a la url indicada en el action del form.

El formato de JSON que espera recibir es el siguiente:

						
[
  {
    "fechaini": "2017-08-29 00:00:00.0",
    "fechafin": "2017-09-03 00:00:00.0",
    "texto": "XVIII FERIA DE ARTESANÍA DE PALENCIA. PALENCIA",
    "dia": [
      1,
      2,
      3
    ],
    "href": ""
  },
  {
    "fechaini": "2017-09-01 00:00:00.0",
    "fechafin": "2017-09-01 00:00:00.0",
    "texto": "XXXIX FERIA DE CERÁMICA Y ALFARERÍA DE VALLADOLID. VALLADOLID",
    "dia": [
      1
    ],
    "href": ""
  }
]
						
					
  • Ilunion WCAG 2.0 WAI - AA