Search code examples
javascripthtmlspectrumjs

Problem when changing color manually on Spectrumjs

I am using spectrum color selector to select the color of events for my calendar (fullcalendar) and It works just fine. The problem comes when i try to modify one of those events. I have two different color selectors (both of them are spectrum) and I want the default color selected on that color selector (the one where i modify the event) to have the same color than the event, but if i update it manually this happens:

If i don't change the default color If i do change it to the event color
1 2

Here's the code where I create the color selector:

$("#color-picker > li > div").spectrum({
                    preferredFormat: "hex",
                    showInput: true,
                    showPalette: true,
                    palette: [
                      ["#3c8dbc", "#f56954", "#00a65a", "#f39c12", "#00c0ef", "#d2d6de"]
                      // Añade los colores que desees a la paleta
                    ],
                    change: function(color) {
                      // Guarda el color seleccionado
                      currColor = color.toHexString();
                    //document.getElementById("color-picker-btn").setAttribute('style', 'color:'+currColor+';');
                    },
                    cancelText: "Cancelar",
                    chooseText: "Elegir",
                    clearText: "Limpiar",
                    noColorSelectedText: "Ningún color seleccionado",
                    togglePaletteMoreText: "Más",
                    togglePaletteLessText: "Menos"
                  });

And here is the code where I modify the color selected:

$("#color-picker > li > div").spectrum({
                    color: evento.borderColor
                });

To be honest I don't know what the problem is and I have been doing some research but couldn't find anything.

Edit: Okay, I already founf the answer, that was not the proper way of updating the color. I had to use $("#color-picker > li > div").spectrum("set",evento.borderColor);

Solution

  • I already found the answer, that was not the proper way of updating the color. I had to use

    $("#color-picker > li > div").spectrum("set",evento.borderColor);