Блог

В настоящее время я использую пакет react-calendly, и все работает так, как ожидалось. Я могу выбрать дату и т.д. И опубликовать событие в календаре. Единственная проблема заключается в том, что под календарем есть 3 серые точки, показывающие, что виджет загружается. Они никогда не исчезают, виджет, похоже, находится в состоянии постоянной загрузки. Есть ли причина, по которой это происходит? Или, может быть, мог бы предложить отдельное решение в отличие от пакета, который я использую. Нажмите https://m44fc.csb.app / чтобы понять, о чем я говорю. Вот ручка с кодом, если вы хотите протестировать решениеhttps://codesandbox.io/s/dreamy-dewdney-m44fc?file=/src/App.js

Мой код выглядит следующим образом:

 import React, { useState } from 'react'
import { InlineWidget } from 'react-calendly'

function App() {
  return (
    <>
      <InlineWidget
        url='https://calendly.com/myURL'
        utm={{
          utmCampaign: 'Spring Sale 2019',
          utmContent: 'Shoe and Shirts',
          utmMedium: 'Ad',
          utmSource: 'Facebook',
          utmTerm: 'Spring'
        }}
      />
    </>
  )
}

export default App
  

возникает следующая проблема в моих инструментах разработки Chrome:

Устраните эту проблему, обновив атрибуты файла cookie: укажите SameSite=None и защитите, если файл cookie предназначен для установки в контекстах между сайтами. Обратите внимание, что атрибут Secure может использоваться только для файлов cookie, отправляемых по протоколу HTTPS. Укажите SameSite= Строгий или SameSite = Слабый, если файл cookie не должен устанавливаться при межсайтовых запросах

Есть ли что-то, что мне нужно сделать, чтобы решить эти проблемы?

Похоже, что в компоненте React отсутствует важное свойство стиля. Мы рассмотрим возможность его исправления, но пока обходной путь заключается в том, чтобы самостоятельно передавать следующие стили при использовании компонента:

 <InlineWidget
    url="https://calendly.com/robert-612/complimentary-consultation"
    utm={{
      utmCampaign: "Spring Sale 2019",
      utmContent: "Shoe and Shirts",
      utmMedium: "Ad",
      utmSource: "Facebook",
      utmTerm: "Spring"
    }}
    styles={{
      minWidth: "320px",
      height: '630px', 
      position: 'relative',
    }}
  />  
  

Значения minWidth и height взяты из значений компонента по умолчанию, position: relative чего не хватало. Это должно гарантировать, что виджет всегда покрывает точки загрузки, независимо от размера страницы.