sfFormExtraPlugin es un excelente plugin que mantienen los desarrolladores de Symfony con un montón de características adicionales que te ayudarán a construir formularios más completos.

¿Qué podemos encontrar en este plugin?

Són varias las utilidades que nos ofrece, desde la creación de campos captcha para evitar el spam hasta campos de texto autocompletables en función de lo que vayamos escribiendo. Aquí os dejo una lista con sus posibilidades:

1. ReCaptcha widget y validador
2. Editor HTML WYSIWYG para campos de texto
3. Selector de fechas tipo calendario
4. Selectores de idioma
5. Widget de listas dobles
6. Widget de autocompletado en campos de texto

¿Cómo instalar y usar sfWidgetFormJQueryDate?

sfWidgetFormJQueryDate nos creará un selector de fechas con unas configuraciones mínimas para facilitar la tarea de rellenar los campos date en nuestros formularios. En la siguiente imágen, puedes ver el resultado de su correcta implementación:

A pesar de que este plugin está muy extendido, es muy poca la información que se puede encontrar sobre como instalarlo y usarlo correctamente. Espero que esta pequeña guía os sea de utilidad.

1. Instalar el plugin:
   symfony plugin:install sfFormExtraPlugin
2. Una vez instalado, también necesitaremos descargar las librerías jQuery UI de la web oficial.
3. Ahora debemos configurar convenientemente nuestra aplicación para que use estas librerías javascript. Abre el zip descargado y mueve los archivos jquery-1.3.2.min.js y jquery-ui-1.7.2.custom.min.js a tu carpeta /path/to/project/web/js/Edita el archivo /path/to/project/apps/[app]/config/view.yml y añade esta información:
   javascripts:    [jquery-1.3.2.min.js, jquery-ui-1.7.2.custom.min.js]
4. El siguiente paso será configurar los CSS de la librería jQuery UI. Añadimos  la siguiente información al archivo view.yml recién editado:
   stylesheets:    [main.css, ui-lightness/jquery-ui-1.7.2.custom.css]
5. Configurar nuestro formulario para que utilice el widget:

   class myForm extends sfForm {
     public function configure()
     {
       $this->setWidgets(array(
         'from_date'    => new sfWidgetFormJQueryDate(array(
         'image'=> '/images/icons/calendar_view_month.gif',
         'format' => '%day%/%month%/%year%')
       ),
         //...other widgets
       ));
   
       $this->widgetSchema->setLabels(array(
     		'from_date'    => 'From Date',
                   //...other labels
       ));
     }
   }

6. Por último, lo prepararemos para usar en el action:

     public function executeSearch(sfWebRequest $request){
       $this->form = new myForm();
       return sfView::SUCCESS;
     }

   y renderizaremos en la vista:

   ....
   echo $form['from_date']->renderLabel().":".$form['from_date'];
   ....

Vía | Symfonynerds.com

FullCalendar es un plugin jQuery que nos permite implementar de manera sencilla un calendario con una interfaz visual excelente y muy fácil de personalizar. Además, podemos hacer Drag&Drop (arrastrar y soltar) de los eventos agendados para pasarlos de un día a otro.

Hoy vamos a montar en symfony un módulo que nos mostrará un calendario con los eventos almacenados en nuestra base de datos. La parte de administración no la desarrollaré, pero con las completas herramientas que nos ofrece symfony, nos será muy fácil montarlo (si estás dando tus primeros pasos con Symfony, te recomiendo realizar este tutorial donde podrás ver paso a paso como se implementa un projecto con Symfony).

Generando y configurando el proyecto

Empezaremos desde el principio, creando el proyecto, la aplicación frontend y el módulo calendar:

symfony generate:project calendar
symfony generate:app frontend
symfony generate:module frontend calendar

Ahora conectamos nuestro proyecto con la base de datos modificando el archivo /path/to/project/config/databases.yml

all:
  propel:
    class:        sfPropelDatabase
    param:
      classname:  PropelPDO
      dsn:        mysql:dbname=<strong>[DB-NAME]</strong>;host=localhost
      username:   <strong>[DB-USER]</strong>
      password:   <strong>[DB-PASS]</strong>
      encoding:   utf8
      persistent: true
      pooling:    true

Nuestro siguiente paso será añadir la estructura de base de datos al archivo /path/to/project/config/schema.yml

propel:
  cal:
    id: ~
    description: {type:varchar(50), required: true }
    category: {type: integer, foreignTable: cal_category, foreignReference: id, required: true}
    details: {type:varchar(255), required: true }
    dstart: {type: date, required: true }
    dend: {type: date, required: true }
    created_at: ~
    updated_at: ~
    _indexes:
      intra_cal_I_1: [dstart]
      intra_cal_I_1: [dend]

  cal_category:
    id: ~
    category: {type:varchar(50), required: true, index: unique}
    created_at: ~
    updated_at: ~

y ahora, desde línea de comandos, indicaremos a symfony que genere la base de datos y el modelo de datos, para ello, ejecutamos:

symfony propel:build-all

Con estos pasos ya tenemos preparado nuestro proyecto para integrar FullCalendar… manos a la obra!

Integrando FullCalendar

El primer paso será bajarnos jQuery y FullCalendar de las páginas oficiales. Después guardamos los js jquery.min.js, fullcalendar.min.js, ui.draggable.js y ui.core.js en la carpeta /path/to/project/web/js y el css fullcalendar.css en /path/to/project/web/css.

Suele ser buena práctica definir las rutas antes de empezar a programar.  Dejaremos la ruta por defecto para mostrar el calendario, pero modificaremos la que nos muestra los detalles para indicarle que debe usar la clase sfPropelRoute que nos permitirá obtener el objeto job sin necesidad de generar la consulta SQL. Abrimos el archivo /path/to/project/apps/frontend/config/routing.yml y le añadimos:

cal_show_event:
  url:   /:module/:action/id/:id
  class:   sfPropelRoute
  options: { model: Cal, type: object }
  param:   { module: calendar, action: show }

El siguiente paso será implementar los eventos del mes actual hacia adelante, añadiendo la siguiente función al archivo /path/to/project/lib/model/CalPeer.php

  static public function getCalEvents(){
    // crea el inicio de mes
    $IniMes = date('d-m-Y',mktime(0,0,0,date('m'),1,date('Y')));
    $criteria = new Criteria();
    $criteria->add(self::DSTART, $IniMes, Criteria::GREATER_EQUAL);
    return self::doSelect($criteria);
  }

En el index de nuestro módulo /path/to/project/apps/frontend/modules/calendar/actions/actions.class.php llamámos a esta función:

  public function executeIndex(sfWebRequest $request)
  {
    $this->cal_list = CalPeer::getCalEvents();
  }
  public function executeShow(sfWebRequest $request)
  {
    $this->cal = $this->getRoute()->getObject();
  }

Ahora es el momento de crear la vista /path/to/project/apps/frontend/modules/calendar/templates/indexSuccess.php

<?php use_stylesheet('fullcalendar.css') ?>
<script type='text/javascript'>

$(document).ready(function() {

var d = new Date();
var y = d.getFullYear();
var m = d.getMonth();

$('#calendar').fullCalendar({
draggable: true,
events: [
<?php $total = count($intra_cal_list); $i=0; ?>
<?php foreach ($cal_list as $intra_cal): ?>
{
<?php $i++; ?>
id: <?php echo $intra_cal->getId() ?>,
title: "<?php echo $intra_cal->getDescription() ?>",
<?php
$fecha = strtotime($intra_cal->getDstart());
$anno = date("Y", $fecha);
$mes = date("m", $fecha);
$mes--;
$dia = date("d", $fecha);
?>
start: <?php echo "new Date(".$anno.", ".$mes.", ".$dia.")"; ?>,
<?php
$fecha = strtotime($intra_cal->getDend());
$anno = date("Y", $fecha); $mes = date("m", $fecha);
$mes--;
$dia = date("d", $fecha);
?>
end: <?php echo "new Date(".$anno.", ".$mes.", ".$dia.")"; ?>,
url: "<?php echo url_for('cal/show?id='.$intra_cal->getId()) ?>"
}<?php if ($i != $total) echo "," ?>
<?php endforeach; ?>
]
});

});

</script>

<div id='calendar'></div>

y la vista que nos mostrará el detalle de un evento /path/to/project/apps/frontend/modules/calendar/templates/showSuccess.php

<h1><?php echo $cal->getDescription()?></h1>
<?php echo $cal->getDetails() ?>

Por último, añadimos las siguientes líneas al layout /path/to/project/apps/frontend/templates/layout.php

<?php use_javascript('jquery.min.js') ?>
<?php use_javascript('fullcalendar.min.js') ?>
<?php use_javascript('ui.core.js') ?>
<?php use_javascript('ui.draggable.js') ?>

Hecho esto, si accedemos a nuestra aplicación desde el navegador http://localhost/web/calendar/index veremso nuestro calendario funcionando.