Todas las entradas de: admin

S-016 – Integración de DayPilot en Svelte 5

Quien tenga conocimiento de mis artículos del Blog, recodará que tengo algunos artículos sobre el uso del Calendario y Gestor de Recursos de DayPilot. Es un producto muy utilizado en los desarrollos Web y dispone de características muy bonitas y prácticas. Desde mi punto de vista, lo considero con mejor UI y características que FullCalendar.

Aunque dispone de una versión Open Source, esta versión es muy, muy reducida y no la he tenido en cuenta para esta integración, ya que  si necesitamos esta solución en un proyecto, creo que se puede pagar una licencia del mismo, dada la calidad que va a dar al proyecto.

Objetivo

En la web del fabricante no se indica que se puede utilizar con Svelte, pero veremos en el ejemplo que podemos utilizar la web Web JavaScript, para los desarrollos de Svelte.

Como objetivo, el ejemplo debe incorporar:

  • Funcionamiento en Svelte 5 y utilización en código reactivo.
  • Definición de calendario de día, semana y mes, disponiendo de una guía de 3 meses para poder navegar entre fechas.
  • Etiquetado y coloreado de actividades.
  • Operación de navegación para reposición de los datos (ahora son fijo, pero se dispone del ejemplo para hacer la petición de las acciones entre fechas).
  • Evento de clic en una actividad o obtención de los datos de la acción. (para operaciones CRUD de actividad).
  • Se ha personalizado para español, así se facilita la adaptación a otros idiomas.

DEMO: https://fhumanes.com/daypilot-svelte/

Si te interesa este tema, sigue leyendo el artículo completo en este enlace.

S-015 – FullCalendar en Svelte 5

Si deseas disponer de un entorno completo para hacer aplicaciones, necesitas tener resuelto cómo implementar «un calendario» para agenda de citas, reuniones, etc. He estado esperando que SVAR UI publique su alternativa, pero hasta este momento, no lo ha hecho y por ello he trabajado con más detalle la solución de FullCalendar que del entorno del que venimos (PHPRunner y WEB), es el más habitual y tenemos experiencia en su utilización.

Este tema fue tratado en la guía S-004 aunque en dicha guía tuve muchas dificultades en su uso, quizá por el enfoque que me ofreció la IA en ese momento y en esta versión es un ejemplo mucho más completo, con todas las funciones aplicables, y desde mi punto de vista, muy bien resueltas.

Objetivo

Disponer de un ejemplo de Calendario y de «Timeline» de Recursos, con la biblioteca de Jacascript FullCalendar. El ejemplo incluye:

  • Vista de calendario de diario, semana, mes y año (multimeses) y de Recursos de diario, semana y mes.
  • Ajuste del producto para el Español (fácil adaptación a cualquier otro idioma).
  • Disponibilidad de Tooltip en la actividades.
  • Acción de clic sobre una actividad y control sobre los datos de la actividad.
  • Funcionamiento de la reactividad en el producto.

DEMO: https://fhumanes.com/fullcalendar-svelte/

Si estás interesado en este tema, sigue leyendo el artículo en este enlace.

S-014 – Integración Anychart en Svelte

Con Anychart he realizado varios ejemplos (de cierta calidad para mí) y es un producto con el que me encuentro muy cómodo por el gran potencial que tiene, ya que dispone de gráficos , mapas, etc., de todos los tipos y su soporte es excepcional.

Me «tope» con él hace muchos año cuadro empecé a utilizar PHPRunner, aunque su integración era bastante floja, pues se podía hacer muy pocas cosas, lo que sí facilitaba era un código de licencia que te permitía hacer la totalidad funcional del producto.

Es un producto que hay que licenciar, si no dispones de un código válido de otro producto, pero si vas a realizar una APP con un potencial gráfico grande, seguro que te va a ser de gran ayuda.

Objetivo

Analizar la integración de AnyChart con Svelte y verificar su funcionamiento, incluyendo el tema de multi-idioma. Se ha hecho la integración de 2 formas:

  • NPM .- Con la instalación de la librería como cualquier otra de las librerías para los framework de Front-End de JavaScript.
  • CDN.- Con la misma integración que se utiliza para las aplicaciones WEB. Esta opción puede ser muy interesante pues aunque no encuentres documentación del proveedor que funciona en Svelte, lo normal es que puedas integrarlo de forma similar a este ejemplo.

DEMOS:
NPM – https://fhumanes.com/anychart-svelte/
CDN – https://fhumanes.com/anychart2-svelte/

Si te interesa este tema, sigue leyendo el artículo.

S-012 – Actualización de aplicación Shopping – Svelte

He corregido y ampliado la funcionalidad de este desarrollo.

Corrección:

He modificado CSS de la página «Login.svelte» para que se ajuste mejor esta página en los dispositivos móviles. Además del tamaño de los campos, que el vea la imagen de la página.

Ampliación:

En la página «Producto.svelte» he añadido un botón para obtener un informe PDF de los productos que están pendientes de comprar. El desarrollo se ha hecho con PdfMake y está descrito en esta guía.

A través de este enlace tienes acceso al artículo completo y los fuentes del desarrollo.

S-013 – Generar documentos PDF con PdfMake

Como he indicado en otros artículos, la necesidad de generar informes, principalmente en formato PDF, es una función básica y como he hecho en otros entornos de desarrollo (React y PHPRunner ), he escogido la solución de PdfMake.

Esta solución es sencilla, muy rápida y especialmente indicada a documentos tipo factura, albarán, o como en este caso, a la lista de la compra (todos documentos de pocas hojas). Para saber cómo podéis construir los documentos (dispone de una herramienta de diseño básica) debéis consultar el artículo de PHPRunner.

El documento se genera en el navegador y se define en JavaScript, alimentado de los datos en formato JSON.

Objetivo

Ofrecer una solución muy sencilla y práctica para ofrecer informes en PDF, desde Svelte.

DEMO: https://fhumanes.com/informe-pdf/

Si estás interesado en este tema sigue leyendo el artículo en este enlace.