Tema: integrar modal jquery a fullcalendar
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 13/04/2012, 04:39
Montes28
 
Fecha de Ingreso: septiembre-2010
Mensajes: 1.853
Antigüedad: 14 años, 2 meses
Puntos: 6
integrar modal jquery a fullcalendar
hola amigos del foro espero me puedan ayudar

integrar modal jquery a fullcalendar

estoy capturando el titulo del evento con una pequeña ventana emergente (prompt) , es aqui donde necesito la ventana modal


Código Javascript: 
Ver original
  1. select: function(start, end, allDay) {
  2.                 var title = prompt('Evento:');
  3.                 if (title) {
  4.                     $.ajax({
  5.                          url:'archivo.php',
  6.                          type:'post',
  7.                          data:{
  8.                             title: title,
  9.                             start: start.toUTCString(),
  10.                             end: end.toUTCString(),
  11.                             allDay: allDay,
  12.                             }
  13.                         
  14.                     }).done(function(data) {
  15.                         //alert("Evento Guardado");
  16.                          //alert("Datos guardados, respuesta: " + start);
  17.                     });
  18.                     
  19.                     
  20.                     //calendar.fullCalendar('renderEvent',
  21.                       calendar.fullCalendar('refetchEvents',
  22.                         {
  23.                             
  24.                             title: title,
  25.                             start: start,
  26.                             end: end,
  27.                             allDay: allDay,
  28.                         
  29.                             
  30.                         },
  31.                         true // make the event "stick"/ make the event "stick"
  32.                         
  33.                     );
  34.                 }
  35.                 calendar.fullCalendar('unselect');
  36.                 
  37.             }

hasta el momento tengo una ventana modal que se carga fuera del calendario y asi no sirve

la ventana modal debe de cargar al hacer click sobre cualquier dia del calendario

Código Javascript: 
Ver original
  1. <script>
  2.     $(function() {
  3.         // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
  4.         $( "#dialog:ui-dialog" ).dialog( "destroy" );
  5.         
  6.         var name = $( "#name" ),
  7.             email = $( "#email" ),
  8.             password = $( "#password" ),
  9.             allFields = $( [] ).add( name ).add( email ).add( password ),
  10.             tips = $( ".validateTips" );
  11.  
  12.         function updateTips( t ) {
  13.             tips
  14.                 .text( t )
  15.                 .addClass( "ui-state-highlight" );
  16.             setTimeout(function() {
  17.                 tips.removeClass( "ui-state-highlight", 1500 );
  18.             }, 500 );
  19.         }
  20.  
  21.         function checkLength( o, n, min, max ) {
  22.             if ( o.val().length > max || o.val().length < min ) {
  23.                 o.addClass( "ui-state-error" );
  24.                 updateTips( "Length of " + n + " must be between " +
  25.                     min + " and " + max + "." );
  26.                 return false;
  27.             } else {
  28.                 return true;
  29.             }
  30.         }
  31.  
  32.         function checkRegexp( o, regexp, n ) {
  33.             if ( !( regexp.test( o.val() ) ) ) {
  34.                 o.addClass( "ui-state-error" );
  35.                 updateTips( n );
  36.                 return false;
  37.             } else {
  38.                 return true;
  39.             }
  40.         }
  41.         
  42.         $( "#dialog-form" ).dialog({
  43.             autoOpen: false,
  44.             height: 600,
  45.             width: 680,
  46.             modal: true,
  47.             buttons: {
  48.                 "Crear Nuevo Evento": function() {
  49.                     var bValid = true;
  50.                     allFields.removeClass( "ui-state-error" );
  51.  
  52.                     bValid = bValid && checkLength( name, "username", 3, 16 );
  53.                     bValid = bValid && checkLength( email, "email", 6, 80 );
  54.                     bValid = bValid && checkLength( password, "password", 5, 16 );
  55.  
  56.                     bValid = bValid && checkRegexp( name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." );
  57.                     // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
  58.                     bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. [email protected]" );
  59.                     bValid = bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );
  60.  
  61.                     if ( bValid ) {
  62.                         $( "#users tbody" ).append( "<tr>" +
  63.                             "<td>" + name.val() + "</td>" + 
  64.                             "<td>" + email.val() + "</td>" + 
  65.                             "<td>" + password.val() + "</td>" +
  66.                         "</tr>" ); 
  67.                         $( this ).dialog( "close" );
  68.                     }
  69.                 },
  70.                 Cancelar: function() {
  71.                     $( this ).dialog( "close" );
  72.                 }
  73.             },
  74.             close: function() {
  75.                 allFields.val( "" ).removeClass( "ui-state-error" );
  76.             }
  77.         });
  78.  
  79.         $( "#create-user" )
  80.             .button()
  81.             .click(function() {
  82.                 $( "#dialog-form" ).dialog( "open" );
  83.             });
  84.     });
  85.     </script>



Código HTML: 
Ver original
  1. <div id="dialog-form" title="Crear Nuevo Evento">
  2.     <p class="validateTips"></p>
  3.  
  4.     <form>
  5.     <fieldset>
  6.             <fieldset>
  7.         <label for="name">Evento</label>
  8.         <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
  9. <table width="662" border="0" id="users" >
  10.   <tr>
  11.     <td width="216"><label>
  12.       <input type="checkbox" name="checkbox" value="checkbox" />
  13.       User</label></td>
  14.     <td width="216"><input type="checkbox" name="checkbox10" value="checkbox" />
  15. User</td>
  16.     <td width="216"><input type="checkbox" name="checkbox102" value="checkbox" />
  17. User</td>
  18.   </tr>
  19.   <tr>
  20.     <td><label>
  21.       <input type="checkbox" name="checkbox2" value="checkbox" />
  22. User</label></td>
  23.     <td><input type="checkbox" name="checkbox22" value="checkbox" />
  24. User</td>
  25.     <td><input type="checkbox" name="checkbox222" value="checkbox" />
  26. User</td>
  27.   </tr>
  28.   <tr>
  29.     <td><label>
  30.       <input type="checkbox" name="checkbox3" value="checkbox" />
  31. User</label></td>
  32.     <td><input type="checkbox" name="checkbox32" value="checkbox" />
  33. User</td>
  34.     <td><input type="checkbox" name="checkbox322" value="checkbox" />
  35. User</td>
  36.   </tr>
  37.   <tr>
  38.     <td><label>
  39.       <input type="checkbox" name="checkbox4" value="checkbox" />
  40. User</label></td>
  41.     <td><input type="checkbox" name="checkbox42" value="checkbox" />
  42. User</td>
  43.     <td><input type="checkbox" name="checkbox422" value="checkbox" />
  44. User</td>
  45.   </tr>
  46.   <tr>
  47.     <td><label>
  48.       <input type="checkbox" name="checkbox5" value="checkbox" />
  49. User</label></td>
  50.     <td><input type="checkbox" name="checkbox52" value="checkbox" />
  51. User</td>
  52.     <td><input type="checkbox" name="checkbox522" value="checkbox" />
  53. User</td>
  54.   </tr>
  55.   <tr>
  56.     <td><label>
  57.       <input type="checkbox" name="checkbox6" value="checkbox" />
  58. User</label></td>
  59.     <td><input type="checkbox" name="checkbox62" value="checkbox" />
  60. User</td>
  61.     <td><input type="checkbox" name="checkbox622" value="checkbox" />
  62. User</td>
  63.   </tr>
  64.   <tr>
  65.     <td><label>
  66.       <input type="checkbox" name="checkbox7" value="checkbox" />
  67. User</label></td>
  68.     <td><input type="checkbox" name="checkbox72" value="checkbox" />
  69. User</td>
  70.     <td><input type="checkbox" name="checkbox722" value="checkbox" />
  71. User</td>
  72.   </tr>
  73.   <tr>
  74.     <td><label>
  75.       <input type="checkbox" name="checkbox8" value="checkbox" />
  76. User</label></td>
  77.     <td><input type="checkbox" name="checkbox82" value="checkbox" />
  78. User</td>
  79.     <td><input type="checkbox" name="checkbox822" value="checkbox" />
  80. User</td>
  81.   </tr>
  82.   <tr>
  83.     <td><label>
  84.       <input type="checkbox" name="checkbox9" value="checkbox" />
  85. User</label></td>
  86.     <td><input type="checkbox" name="checkbox92" value="checkbox" />
  87. User</td>
  88.     <td><input type="checkbox" name="checkbox922" value="checkbox" />
  89. User</td>
  90.   </tr>
  91. </table>
  92.  
  93.     <p>&nbsp;</p>
  94.     <p align="center">
  95.       <label>
  96.       <input type="checkbox" name="checkbox11" value="checkbox">
  97.       </label>
  98.     l_manizales</p>
  99.     </fieldset>
  100.     </form>
  101. </div>
  102.  
  103.  
  104.  
  105. <button id="create-user">Crear Nuevo Evento</button>
  106.  
  107. </div><!-- End demo -->