dudas

[veronica orozco]

Buenos dia

tengo dos inquietudes 

1. es posible cambiar el color del texto en las citas, pero cada una independiente, es decir, las citas que manejamso tiene cada una un color diferentes y el texto para verse tambien se debe de acoplar para poder ver el texto (adjunto imagen, el texto en el color amarillo no se ve); Sabemos que un el codigo

  var inv_rgb = [];

                for (var i = 0; i < rgb.length; i++) {

                    inv_rgb.push(255 - rgb[i]);

                }

podemos invertir el color, pero donde podemos hacer el llamado a este codigo?

2. es que quiere que desde este el tiempo actual hacia atras no deje programar citas, sino de la hora en que la abran hacia adelante ?

gracias 

Attachment: colr_7e44f9cd.zip

[Karthigeyan Krishnamurthi]

Hi Veronica, 

 

Thank you for contacting Syncfusion support. 

 

Please find the below responses for your queries. 

 

Q: es posible cambiar el color del texto en las citas, pero cada una independiente, es decir, las citas que manejamso tiene cada una un color diferentes y el texto para verse tambien se debe de acoplar para poder ver el texto (adjunto imagen, el texto en el color amarillo no se ve); Sabemos que un el codigo 

 

Font color can be customized for each category option and for the same we have prepared the below smaple. 

http://www.syncfusion.com/downloads/support/forum/135902/ze/Sample1368692934 

 

<Code> 

<CategorizeSettings Enable="true" AllowMultiple="true" Id="id" Color="color" FontColor="fontColor" Text="text"> 

</CategorizeSettings> 

 

List<Categorize> CategorizeValue = new List<Categorize>(); 

CategorizeValue.Add(new Categorize { text = "Yellow Category", id = 1, color = "#FFFF00", fontColor = "black" }); 

CategorizeValue.Add(new Categorize { text = "Green Category", id = 2, color = "#7f993e", fontColor = "red" }); 

CategorizeValue.Add(new Categorize { text = "Orange Category", id = 3, color = "#cc8638", fontColor = "#ffffff" }); 

Schedule1.CategorizeSettings.DataSource = CategorizeValue; // hrer we are assiging the category datasource to Schedule 

 

</Code> 

 

Q:  es que quiere que desde este el tiempo actual hacia atras no deje programar citas, sino de la hora en que la abran hacia adelante ? 

 

We suspect that your requirement is to prevent the appointment CRUD actions before today date. In the above sample, no appointments can be added/edited/deleted before the system date (today) and kindly refer the below code example used in the sample. 

 

<Code> 

<ej:Schedule ID="Schedule1" ClientIDMode="Static" Height="525px" Width="100%" Create="onCreate" ActionBegin="onBegin" CellClick="onOpen" AppointmentWindowOpen="onOpen" AppointmentHover="onHover" DragStop="onAction" ResizeStop="onAction" ActionComplete="onComplete" CellHover="onCellHover" DragStart="onStart" ResizeStart="onStart" BeforeAppointmentChange="OnBeforeAppointmentChange" BeforeAppointmentCreate="OnBeforeAppointmentCreate" runat="server" DataSourceID="SqlDataSource1"> 

 

function OnBeforeAppointmentCreate(args) { 

    if (ej.isNullOrUndefined(args.appointment[0])) 

        app = args.appointment; 

    else 

        app = args.appointment[0]; 

    if (new Date(app.StartTime).setHours(0, 0, 0, 0) < new Date().setHours(0, 0, 0, 0)) 

        args.cancel = true 

} 

function OnBeforeAppointmentChange(args) { 

    if (new Date(args.appointment.StartTime).setHours(0, 0, 0, 0) < new Date().setHours(0, 0, 0, 0)) 

        args.cancel = true 

} 

function onStart(args) { 

    if (new Date(args.appointment.StartTime).setHours(0, 0, 0, 0) < new Date().setHours(0, 0, 0, 0)) 

        args.cancel = true 

} 

function onCellHover(args) { 

    if (new Date(args.currentDate).setHours(0, 0, 0, 0) < new Date().setHours(0, 0, 0, 0)) 

        args.cancel = true 

} 

function onOpen(args) { 

    if (ej.isNullOrUndefined(args.appointment)) { 

        if (args.startTime.setHours(0, 0, 0, 0) < new Date().setHours(0, 0, 0, 0)) 

            args.cancel = true 

    } 

    else { 

        if (new Date(args.appointment.StartTime).setHours(0, 0, 0, 0) < new Date().setHours(0, 0, 0, 0)) 

            args.cancel = true 

    } 

} 

function onCreate() { 

    var scheduleObj = $("#Schedule1").data("ejSchedule"); 

    if (scheduleObj.currentView() == "month") { 

        var monthElements = scheduleObj.element.find(".e-monthcells"); 

        var dayIndex = scheduleObj._dateRender.indexOf(new Date().setHours(0, 0, 0, 0)); 

        for (var a = 0, len = scheduleObj._dateRender.length; a < len; a++) { 

            if (scheduleObj._dateRender[a] < new Date().setHours(0, 0, 0, 0)) 

                monthElements.eq(a).addClass("e-othermonths e-disable"); 

        } 

    } 

    else { 

        var allDayElements = scheduleObj.element.find(".e-alldaycells"); 

        for (var b = 0, len = scheduleObj._dateRender.length; b < len; b++) { 

            if (scheduleObj._dateRender[b] < new Date().setHours(0, 0, 0, 0)) { 

                scheduleObj.element.find(".e-workcellstab tr td:nth-child(" + (b + 1) + ")").addClass("e-disable"); 

                allDayElements.eq(b).addClass("e-disable"); 

            } 

            else { 

                scheduleObj.element.find(".e-workcellstab tr td:nth-child(" + (b + 1) + ")").removeClass("e-disable"); 

                allDayElements.eq(b).removeClass("e-disable"); 

            } 

        } 

    } 

} 

function onComplete(args) { 

    if (args.requestType == "dateNavigate" || args.requestType == "viewNavigate") 

        onCreate(); 

} 

function onBegin(args) { 

    if (args.requestType == "appointmentResize" || args.requestType == "appointmentDrag") { 

        if (args.data.appointment.StartTime.getMonth() != new Date().getMonth()) 

            args.cancel = true 

    } 

} 

function onHover(args) { 

    if (new Date(args.appointment.StartTime).setHours(0, 0, 0, 0) < new Date().setHours(0, 0, 0, 0)) 

        args.cancel = true 

 

} 

function onAction(args) { 

    if (new Date(args.appointment.StartTime).setHours(0, 0, 0, 0) < new Date().setHours(0, 0, 0, 0)) 

        args.cancel = true 

} 

</Code> 

 

Regards, 

Karthigeyan 

 

[veronica orozco]

Gracias por la respuesta, la segunda duda la soluciones, pero en la primera no es categorizar, es que en el cuadro de la cita, en el recurso yo le doy el color del relleno 

, pero también quisiera saber si por ese color de fondo le puedo dar un color diferente a la letra ?, es decir a las citas de color fondo azul ponerle letra naranja, citas de color negro ponerle letra blanca y así sucesivamente con los colores que selecciones en el recurso 

[Karthigeyan Krishnamurthi]

Hi Veronica,  

 

Thanks for your update. 

 

By default, there is no option to change the resource font color like category option alternatively appointment template option can be used and for the same we have prepared the below sample fro your reference. 

http://jsplayground.syncfusion.com/5f3wi1tj 

UG: https://help.syncfusion.com/aspnet/schedule/templates#appointment-template 

 

<Code> 

appointmentTemplateId: "#apptemplate", 

 

<script id="apptemplate" type="text/x-jsrender"> 

    {{if View == "month"}} 

    <div style="color:{{:~format(roomId)}};"> 

        <div style='font-size:11px'>{{:Subject}}</div> 

        <div style='font-size:10px'>{{:~date(StartTime)}}</div> 

    </div> 

    {{else}} 

    <div style="color:{{:~format(roomId)}};"> 

        <div style="font-size:11px">{{:Subject}}</div> 

        <div style="font-size:10px"> {{:~date(StartTime)}}-{{:~date(EndTime)}}</div> 

    </div> 

    {{/if}} 

</script> 

function _getTime(time) { 

    return ej.globalize.format(new Date(time), "hh:mm tt"); 

} 

function _getColor(id) { 

    switch (id) { 

        case 1: 

            return "black"; 

        case 2: 

            return "red"; 

        default: 

            return null; 

    } 

} 

$.views.helpers({ date: _getTime, format: _getColor }); 

</Code> 

In the above sample, font color is changed based on the roomId value and it can be changed as per ownerId value too. 

Regards, 

Karthigeyan